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增加选择器权重