样式表IMPORTANCE比较
优先级由上往下递减，如果重要性一致，则对比选择器的特异性 Specificity，也叫“具体程度”.
- 用户声明的
!important - 作者声明的
!important - 作者样式表
- 用户样式表
- 浏览器默认样式表
特异性 Specificity
当有多条冲突的CSS规则指向同一元素，则浏览器会计算特异性选择更具体的规则。
如果特异性相同，则按照代码顺序，靠后的规则覆盖前面的规则。
特异性的计算：
计算下面三种情况的数量，并形成一个三元数。
- IDs
- 类，伪类，属性
- 标签，伪元素
案例：
.button：(0, 1, 0)nav#nav div.pull-right .button：(1, 2, 2) 一个ID，两个类，两个标签a：(0, 0, 1) 仅一个标签#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)； - 应使用特异性解决问题（计算样式的优先级），而不是依赖代码的顺序；
- 当使用第三方样式表的时候，最好将作者样式表置于最后。