今天在google reader上看到一篇博文，然后在问了组里的几位同事之后才发现自己曾经一直对css selector的理解存在着误区。据说老外的文章中很早就提到了关于css selector是优先级算法，只是到了国内被部分人员翻译之后，误解了其中的含义，导致现在很多人以为css选择符的优先级运算是将ID名、类名等等全部相加后做比较的。
这篇博文命名为《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><div><div><div><div><div><div><div><div><div>
<div 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
扩展阅读：http://www.cssforest.org/blog/index.php?id=164
显然，这个问题中id的样式肯定会出现，而class的样式不会出现。紧记这次的教训，以后多花点时间去看老外的文章，以及去巩固和更好地掌握基础知识。
