CSS選擇器、優先順序與匹配原理
阿新 • • 發佈:2018-12-26
http://www.cnblogs.com/aaronjs/p/3156809.html
計算指定選擇器的優先順序:重新認識CSS的權重
- 通配選擇符的權值 0,0,0,0
- 標籤的權值為 0,0,0,1
- 類的權值為 0,0,1,0
- 屬性選擇的權值為
0,0,1,10,0,1,0 - 偽類選擇的權值為 0,0,1,0
- 偽物件選擇的權值為 0,0,0,1
- ID的權值為 0,1,0,0
- important的權值為最高 1,0,0,0
使用的規則也很簡單,就是 選擇器的權值加到一起,大的優先;如果權值相同,後定義的優先 。雖然很簡單,但如果書寫的時候沒有注意,很容易就會導致CSS的重複定義,程式碼冗餘。
從上面我們可以得出兩個關鍵的因素:
- 權值的大小跟選擇器的型別和數量有關
- 樣式的優先順序跟樣式的定義順序有關
記得以前看過一篇文章 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的執行效率:
- 樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符,樣式系統就會繼續向左移動,直到找到和規則匹配的元素,或者因為不匹配而退出。
- 如果你非常在意頁面的效能那千萬別使用CSS3選擇器。實際上,在所有瀏覽器中,用 class 和 id 來渲染,比那些使用同胞,後代選擇器,子選擇器(sibling, descendant and child selectors)對頁面效能的改善更值得關注。
Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低做了一個排序:
- 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)
- 上面九種選擇器中ID選擇器的效率是最高,而偽類選擇器的效率則是最低