Hello World!|

feixianxing

园龄:2年8个月粉丝:28关注:1

2024-02-07 22:28阅读: 63评论: 0推荐: 0

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

本文作者:feixianxing

本文链接:https://www.cnblogs.com/feixianxing/p/18011418/css-importance-specificity

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   feixianxing  阅读(63)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起