简述CSS Selector的优先级

网络整理 - 07-27

我们来介绍一下CSS Selector的优先级。本文主要是围绕“11个class与1个id”的话题展开的，简单的来说就是这样的，一个拥有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中的class是10，id是100，然后脑袋中很自然地就想到，11个class的话，那么不就是110了嘛。这样就一定会比id要大了，最终的颜色应该是红色，但其实不然，最终的颜色是绿色，是那个id的颜色。

当时看到这个我表示十分纳闷，然后看文中的介绍又是一头雾水，后来经过组内同事指导以及个人心中对自我很严重的BS之后，终于明白了为什么会这样。其实当时在看一些书籍的时候，其中介绍到的那些1和0组成的数字，其实仅仅只是1和0而已，并不是1000、100、10、1之类。

在图中可以看到，一个id选择符时是0,1,0,0，然后两个id的选择符则是0,2,0,0，以此类推，每增加一个id选择符的话，那么就是代表左起第二个数字会递增，仅仅只是这个数字在增加而已。同理，使用class的选择符也是一样的。那么回到前面提到的“11个class与1个id”的问题，用这样的方式计算结果就是：

1个id时：0,1,0,0

11个class时：0,0,11,0

显然，这个问题中id的样式肯定会出现，而class的样式不会出现。紧记这次的教训，以后多花点时间去看老外的文章，以及去巩固和更好地掌握基础知识。这一年来，心态上一直都在迷失着，太随性了。目标和方向经常被自己遗忘，经常经历这样的事情对个人而言是好事，可以很清晰地看到自己的不足，然后进行弥补！

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