[CSS] 级联与特异性

样式表IMPORTANCE比较

优先级由上往下递减，如果重要性一致，则对比选择器的特异性 Specificity，也叫“具体程度”.

1. 用户声明的!important
2. 作者声明的!important
3. 作者样式表
4. 用户样式表
5. 浏览器默认样式表

特异性 Specificity

当有多条冲突的CSS规则指向同一元素，则浏览器会计算特异性选择更具体的规则。

如果特异性相同，则按照代码顺序，靠后的规则覆盖前面的规则。

特异性的计算：

计算下面三种情况的数量，并形成一个三元数。

1. IDs
2. 类，伪类，属性
3. 标签，伪元素

案例：

1. .button：(0, 1, 0)
2. nav#nav div.pull-right .button：(1, 2, 2) 一个ID，两个类，两个标签
3. a：(0, 0, 1) 仅一个标签
4. #nav a.button:hover：(1, 2, 1)

优先级比较：

从左往右比较，如果不同则直接得出优先级，如果相同则比较下一位。

(1,2,2)>(1,2,1)>(0,1,0)>(0,0,1)

如果均相同，则按照代码顺序决定。

级联与特异性总结

• 使用!important标记的声明具有最高优先级；
• 非必要不使用!important，因为它会导致代码可维护性很差；
• 内联样式的优先级永远高于外部样式表；
• 1个ID选择器的特异性高于包含1000个类的选择器；
• 1个类选择器的特异性高于包含1000个元素的选择器；
• 通配符 * 没有特异性，(0, 0, 0)；
• 应使用特异性解决问题（计算样式的优先级），而不是依赖代码的顺序；
• 当使用第三方样式表的时候，最好将作者样式表置于最后。