http://www.cnblogs.com/aaronjs/p/3156809.html

計算指定選擇器的優先順序:重新認識CSS的權重

1. 通配選擇符的權值 0,0,0,0
2. 標籤的權值為 0,0,0,1
3. 類的權值為 0,0,1,0
4. 屬性選擇的權值為 0,0,1,1 0,0,1,0
5. 偽類選擇的權值為 0,0,1,0
6. 偽物件選擇的權值為 0,0,0,1
7. ID的權值為 0,1,0,0
8. important的權值為最高 1,0,0,0

使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重複定義，程式碼冗餘。

從上面我們可以得出兩個關鍵的因素：

1. 權值的大小跟選擇器的型別和數量有關
2. 樣式的優先順序跟樣式的定義順序有關

記得以前看過一篇文章 256個class類名選擇器幹掉一個id選擇器例項頁面

Gecko overflows the count of classes into the count of IDs, each of which holds 8 bits.

— Cameron McCormack (@heycam) August 16, 2012

給出的答案是:所有的類名(classes)都是以8位元組字串儲存的。8位元組所能hold的最大值就是255. 當同時出現256個class, 勢必會越過其邊緣，溢位到id區域。

總結：

比較同一級別的個數，數量多的優先順序高，如果相同即比較下一級別的個數

important > 內聯 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽物件 > 繼承 > 萬用字元 萬用字元 > 繼承

這也就解釋了為什麼11個標籤的定義會比不上1個類的定義，1個類加11個標籤會比不上2個類的權重高。

選擇器種類

查閱資料歸納下大概有如下幾種：

• 通配選擇器

• 型別選擇器

• ID選擇器

• 類選擇器

• 包含選擇器

• 子元素選擇器

• 相鄰兄弟選擇器

• 屬性選擇器

css1-css3提供非常豐富的選擇器，但是由於某些選擇器被各個瀏覽器支援的情況不一樣，所以很多選擇器在實際css開發中很少用到

關於CSS的執行效率：

1. 樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。
2. 如果你非常在意頁面的效能那千萬別使用CSS3選擇器。實際上，在所有瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面效能的改善更值得關注。

Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低做了一個排序：

1. 1.id選擇器（#myid）2.類選擇器（.myclassname）3.標籤選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選擇器（li a）7.萬用字元選擇器（*）8.屬性選擇器（a[rel="external"]）9.偽類選擇器（a:hover,li:nth-child）
2. 上面九種選擇器中ID選擇器的效率是最高，而偽類選擇器的效率則是最低