CSS选择器的权重
本文由 小茗同学 发表于 2016-11-20 浏览(1261)
最后修改 2017-11-09 标签:css 选择器 权重

CSS选择器种类

CSS有很多选择器,按照类型我们简单分为以下几种:

  1. ID #id
  2. .class
  3. 标签 如p
  4. 通用 *
  5. 属性 [type="text"]
  6. 伪类 :hover
  7. 伪元素 如::after
  8. 子选择器、相邻选择器、索引选择器等

补充:伪元素只有如下几种:::after::before::first-letter::first-line::selecton

CSS权重

CSS有自己的优先级计算公式,而不仅仅是简单的行间>内部id>class>元素

选择器的等级

我们按照优先级把CSS选择器大体分为如下4等:

  • 第一等:内联样式,如: style="",权值为1000
  • 第二等:代表ID选择器,如:#content,权值为0100
  • 第三等:类、伪类和属性选择器,如.content,权值为0010
  • 第四等:元素、伪元素,如div:after,权值为0001

另外,通配符、子选择器、相邻选择器等(如*>+)权值为0000,继承样式没有权值,!important可以打破以上规则,具体见后文详细描述。

权重的计算

按照每个选择器的权重计算其总的权值即为其最终优先级。

如:

  • ul#test li.active a,其优先级为:100+3*1+10=113
  • #test li.active a#current,其优先级为:100*2+2*1+10=202

权重的规则

  • 不同的权重,权重值高则生效;
  • 相同的权重:以后面出现的选择器为最后规则(也就是后面的样式会覆盖掉前面的样式);
  • 1,0,0,0 > 0,99,99,99,也就是说从左往右逐个等级比较,前一等级相等才往后比(也可以把权重的累加看成无限的N进制来理解)。
  • 通配符、子选择器、相邻选择器等虽然权值为0000,但是也比继承的样式优先。
  • !important可以打破以上所有规则,强制提升优先级到最高;多个!important同时存在则以最后一个为准,由于!important会使得优先级混乱不堪难以管理,一般情况下不推荐使用。

参考