[CSS] Calculation a selector's specifiicity.

  這篇文章其實是參照 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!