先来看个例子,html部分:
<ul id="nav">
<li>
<strong id="benz" class="title">奔驰</strong>
<ol>
<li>C级</li>
<li>E级</li>
</ol>
</li>
</ul>
CSS部分:
#nav #benz {
color: red;
}
#nav .title {
color: green;
}
那么你认为奔驰会是什么颜色呢?答案是红色,为什么呢?解答这个问题需要了解CSS选择器的优先级了。
选择器的特殊性分成4个成分等级:a,b,c,d。
- 如果样式是行内样式,那么a=1。
- b等于ID选择器的总数
- c等于类、伪类和属性选择器的数量
- d等于类型选择器和伪元素选择器的数量
此时选择器#nav #benz的特殊性为0,2,0,0,也就是200,而#nav .title的特殊性为0,1,1,0,也就是110,200>110,所以#nav #benz的优先级比#nav .title高。
总结下:用style属性编写的行内样式优先级最高,其次是ID选择器,再次是类选择器,最后就是类型选择器,如果两个选择器的优先级一样,后定义的规则优先。
再看个例子,html部分不变,只修改CSS代码
#nav >strong {
color: red;
}
#nav strong {
color: green;
}
此时奔驰的颜色为绿色,那是因为这两个选择器的特殊性相同,都是101,所以后定义的规则优先。
虽然行内样式优先级最高,但也没有标有!important的规则优先级高,比如给类title添加一个带有!important标记的规则。
.title {
color: yellow !important;
}
此时奔驰的颜色为黄色。
温馨提示:所有继承的属性特殊性都为0,任何一条规则都会覆盖继承的属性。