css选择器优先级

sunguanxing

浏览: 1097484 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

zhb32236

javawang2012

841125419

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS 浏览器 HTML

css优先级即CSS样式在浏览器中被解析出来的先后顺序。
css优先级包含四个级别（行内样式，ID选择符，class类选择符，元素选择符）以及各级别出现的次数。继承是css的一个主要特征，然后继承的权重很低，比普通元素还要低。
1.行内样式（类似<p style="color:red">css</p>的样式）的优先级为1，0，0，0，始终高于外部定义（指由<link>或<style>卷标定义的规则）。
2.有！important声明的规则高于一切。
3.如果优先权一样，则按照在源码中出现的顺序决定，后者居上。
测试test_css.html
<html id="html" class="html">
<head>
<style>
div {
margin-top:5px;
}
/*第一组*/
#test1{background-color:#00FF00;}
.test1{background-color:#FF0000;}

/*第二组*/
.body #test2{background-color:#FF0000;}
#test2{background-color:#00FF00;}

/*第三组*/
div .test3{background-color:#00FF00;}
#test3{background-color:#FF0000;}

/*第四组*/
.body #test4{background-color:#00FF00;}
body #test4{background-color:#FF0000;}

/*第五组*/
html #test5{background-color:#00FF00;}
body #test5{background-color:#FF0000;}

/*第六组*/
#body #test6{background-color:#FF0000;}
.html #test6{background-color:#00FF00;}

/*第七组*/
html #body #test7{background-color:#FF0000;}
.html .body #test7{background-color:#00FF00;}

/*第八组*/
#html.html .body #test8{background-color:#FF0000;}
.html #body.body #test8{background-color:#00FF00;}
</style>
</head>
<body id="body" class="body">
<div id="div">
    <div id="test1" class="test test1">1第一行<br>第二行<br>自身</div>
    <div id="test2" class="test test2">2第一行<br>第二行<br>自身</div>
    <div id="test3" class="test test3">3第一行<br>第二行<br>自身</div>
    <div id="test4" class="test test4">4第一行<br>第二行<br>自身</div>
    <div id="test5" class="test test5">5第一行<br>第二行<br>自身</div>
    <div id="test6" class="test test6">6第一行<br>第二行<br>自身</div>
    <div id="test7" class="test test7">7第一行<br>第二行<br>自身</div>
    <div id="test8" class="test test8">8第一行<br>第二行<br>自身</div>
</div>
</body>
</html>
第一组,仅一个选择器单词的时候#id高于.class.
第二组，.body#test2比#test2多了一个单词，多一个单词就选择得更精确，优先给就要高一些。
第三组，同样多了一个单词，但其中一个是#id选择器,则#test3的优先级要高于div .test3.
第四组，同样多层级时，.class高于tag,所以.body #test4高于body #rest4.
第五组，具有同样的优先级，在源码中先写的会被覆盖，优先级与层级跨越的深度无关。
第六组，不用说了，#id高于.class，也与层级深度无关，因此#body #test6高于.html #test6。
第七组，从优先级包含的内容可知优先级与和级别出现的次数有关，前者出现次数大于后者，因此html #body #test7高于.html .body #test7（我是这样理解的）。
第八组，同五，同样的优先级，后者居上。

分享到：