样式表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)\)文章来源：https://www.toymoban.com/news/detail-825104.html
如果均相同，则按照代码顺序决定。文章来源地址https://www.toymoban.com/news/detail-825104.html
级联与特异性总结
- 使用
!important标记的声明具有最高优先级； - 非必要不使用
!important，因为它会导致代码可维护性很差； - 内联样式的优先级永远高于外部样式表；
- 1个ID选择器的特异性高于包含1000个类的选择器；
- 1个类选择器的特异性高于包含1000个元素的选择器；
- 通配符
*没有特异性，(0, 0, 0)； - 应使用特异性解决问题（计算样式的优先级），而不是依赖代码的顺序；
- 当使用第三方样式表的时候，最好将作者样式表置于最后。
到了这里，关于[CSS] 级联与特异性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
