這篇文章其實是參照
W3C - Calculating a selector's specificity 應該會有點像是翻譯文章, 不過我會盡量白話的解釋如何計算 CSS的最後優先順序的數值, 並且呈現最後結果.
我們把 css selector分做四類, 相對應有四個變數, 定義為 a, b, c, d.
a for style, b for id, c for pseudo-classes, d for pseudo-elements.
四個定義如下:
- 如果有設定值來自於 "style" 屬性設定 a為1, 由於這個規則並不沒有任何 CSS Selector的規則, 所以 a = 1, b = 0, c = 0 , d = 0.
- 如果 CSS Selector 有設定 ID 屬性, 則設定 b加一.
- 如果 CSS Selector 有設定 classes, 設定一個 c加一.
- 如果 CSS Selector 有設定 element names 設定一個 d加一.
最後將四個數值串接起來 a-b-c-d.比較, 優先順序是a > b > c > d. 相通者比較下一級數字差異,若仍相同者後宣告者會覆蓋掉前方的設定值.
我稍微修改了一下 W3C的範例加了一些自己的測試案例, 會更能理解 css是怎樣計算出來的.
* {background-color:grey;}
/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {color:blue;}
/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {background-color:yellow;}
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {background-color:pink;}
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {}
/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}
/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red:first-line {background-color:red;}
/*a=0 b=0 c=1 d=4 -> specificity = 0,0,1,4 */
ul ol li.red {background-color:cyan;}
/* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {background-color:lime;}
/* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {color:red;}
/* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
Check out this Pen!
