CSS权重的等级划分与比较

CSS权重

  CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

css选择器权重列表如下

权重 选择器
10000 !important(!important并不是选择器,但是权重却是最高的)
1000 内联样式:style=""
100 ID选择器: #idName{...}
10 类、伪类、属性选择器:.className{...} / :hover{...} / [type="text"] ={...}
1 标签、伪元素选择器:div{...} / :after{...}
0 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)

权值计算公式:

权值 = 第一等级选择器 x 个数,第二等级选择器 x 个数,第三等级选择器 x 个数,第四等级选择器 x 个数;

比较规则:

 当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;

计算实例1:

// 假设下面样式都作用于同一个节点元素`span`,判断下面哪个样式会生效

body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}

解题1:

  先比较高权重位,即第一个样式的高权重为 #god = 100
  第二个样式的高权重为 #god + #text = 200
  100<200
  所以最终计算结果是取width: 250px;。
  若两个样式的高权重数量一样的话,则需要比较下一较高权重!

计算实例2:

<style type="text/css">
#parent p { background-color: red; }
div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
......
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>

解题2:

  很多人往往会按照相加的错误方法 ,如果按照相加的规则的话,上述例子会为:
  qz1 = 100 + 1 = 101
  qz2 = 1 + 10*11 + 1 = 112
  qz1 < qz2
  所以 第二条样式 优先级高,背景色为 green;
  但是 结果却是red,这也证明了权重是按优先级进行比较的。

小结:

  • 先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;
  • css属性后面加 !important 时,无条件绝对优先
  • 单独使用一个选择器的时候,不能跨等级使css规则生效
  • 如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
  • 如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则
  • 完全相同的话,就采用 后者优先原则
  • id的权重相对较高,可利用id增加选择器权重
Author: ahuiyoのblog
Link: http://ahuiyo.cn/CSS权重的等级划分与比较/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
支付宝打赏
微信打赏