今天看到一个关于 CSS 权重的问题:一个拥有 id 名和 class 名的 div 被十个 div 包含着,然后样式是:

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 {
    color:red;
}

#b {
    color:green;
}

HTML 的结构如下:

<div class="a1">
 <div class="a2">
  <div class="a3">
   <div class="a4">
    <div class="a5">
     <div class="a6">
      <div class="a7">
       <div class="a8">
        <div class="a9">
         <div class="a10">
          <div class="a11" id="b">CSS Selector</div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

问最后是什么颜色的 CSS

按照我的理解,CSS 中的 class 是 10,id 是 100,然后自己很自然地就想到,11 个 class 的话,那么不就是 110 了嘛。这样就一定会比 id 要大了,最终的颜色应该是红色,但其实不然,最终的颜色是绿色,是那个 id 的颜色。

后来仔细想了想,终于明白了为什么会这样。其实当时在看一些书籍的时候,其中介绍到的那些 1 和 0 组成的数字,其实仅仅只是 1 和 0 而已,并不是 1000、100、10、1 之类。不能有十进制的进位的思想,真正的理解还是 id 的权重比 class 的大,所以无论多少 class 都抵不过一个 id,其实就是一个这样的规则:比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承,所以就可以理解为什么是绿色的了。