[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)
  • 应使用特异性解决问题(计算样式的优先级),而不是依赖代码的顺序;
  • 当使用第三方样式表的时候,最好将作者样式表置于最后。

热门相关:锦衣   娇妻如云   护花猎王   资本大唐   奈何老公太宠我