CSS选择器优先级

先来看个例子，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，任何一条规则都会覆盖继承的属性。