博客 / 詳情

返回

css權重

1、什麼是css權重?css6大基礎選擇器

css權重指的是css6大基礎選擇符的優先級,優先級高的css樣式會覆蓋優先級底的css樣式,優先級越高説明權重越高,反之亦然。

css6大基礎選擇器:

a)、id選擇器(#box{})
b)、類選擇器(.box{})
c)、屬性選擇器(a[href="http://www.xxx.com"])
d)、偽類和偽對象選擇器(:hoevr{}和::after{})
e)、標籤類型選擇器(div{})
f)、通配符選擇器(*{})

2、css權重計算規則

計算css權重是有一定規則的,根據w3c制定的css規範,css權重計算規則如下:

a)、計算選擇符中的id選擇器的數量
    一個id選擇器為一個a,一個a為100
    
b)、計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數量
    一個類選擇器、屬性選擇器以及偽類選擇器為一個b,一個b為10
    
c)、計算標籤類型選擇器和偽對象選擇器的數量
    一個標籤類型選擇器、偽對象選擇器為一個c,一個c為1
    
d)、忽略通配符選擇器
    通配符選擇器忽略不計

如下面這張圖就是一個css選擇器權重的例子:
圖片描述

如果兩個選擇符的權重相同,則可依照”就進原則”來判斷,最後定義的選擇符會被採用。但儘量避免出現這種依靠定義的順序決定選擇符優先級的情況,因為在後續的維護中很難保證定義的順序不會被打亂。

user avatar ivyzhang 頭像 ziyeliufeng 頭像 william_wang_5f4c69a02c77b 頭像 sunshine_591c4563d4a83 頭像 xuriliang 頭像 amsterdam_5caf807441f49 頭像 jidongdemogu 頭像 u_16099277 頭像 lawler61 頭像 chamson_5eb23538190b0 頭像 like_5af2bb418652b 頭像 wuwhs 頭像
12 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.