CSS選擇器、優先級與匹配原理

爲了分析Bootstrap源碼,因此的先把CSS選擇器相關的東東給鞏固好

廢話就很少說了

CSS 2.1 selectors, Part 1

計算指定選擇器的優先級:從新認識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選擇器實例頁面

http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

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選擇器的效率是最高，而僞類選擇器的效率則是最低

3. 詳細的介紹你們還能夠點擊Writing efficient CSS selectors。