關於CSS權重的筆記

關於權重的計算,在W3C的網頁上的介紹是:

A selector’s specificity is calculated as follows

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

翻譯一下

  • ID selector的數量為a
  • class, attr, 偽類別為b
  • tag跟偽元素為c
  • 星號直接無視

範例

*               /* a=0 b=0 c=0 -> specificity = 0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-1 */
UL LI           /* a=0 b=0 c=2 -> specificity = 0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity = 0-1-3 */
LI.red.level    /* a=0 b=2 c=1 -> specificity = 0-2-1 */
#x34y           /* a=1 b=0 c=0 -> specificity = 1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 1-0-1 */

計算結果的比較方式

從a比較到c,且abc各自獨立,無法進位。inline style 跟 !important 則不在計算範圍中。

inline style 跟 !important 的權重

inline style 的權重大於所有樣式表內容。!important 則是在權重計算時給予最優先權,權重越大的 !important 也會覆寫權重小的 !important。也因此,在inline style中加上 !important,也會覆寫在樣式表中加的 !important,例如:

css

.class1 {
  color: #f00 !important;
}

html

<div class="class1" style="color: #0f0 !important>
  我會是綠色
</div>

在〈關於CSS權重的筆記〉中有 1 則留言

  1. 自動引用通知: CSS :is, :where Selector | Bloggy

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料