CSS Selector的優先順序

今天在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的樣式不會出現。緊記這次的教訓，以後多花點時間去看老外的文章，以及去鞏固和更好地掌握基礎知識。