[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是怎樣計算出來的.