首頁技術文章正文

CSS層疊性權重計算方法【CSS教程】

更新時間:2021年08月06日17時53分來源:傳智教育瀏覽次數(shù):

好口碑IT培訓

層疊性是指多種CSS樣式的疊加，也是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉。

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上

·選擇器相同，則執(zhí)行層疊性

·選擇器不同，就會出現(xiàn)優(yōu)先級的問題，就會涉及CSS權重計算。

下面我們詳解介紹CSS層疊性權重計算方法。

1) 權重計算公式

關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity(特殊性)

·值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。

·關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity(特殊性)

2) 權重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個基礎選擇器組合而成，那么此時，就會出現(xiàn)權重疊加。

就是一個簡單的加法計算

div ul li ------> 0,0,0,3

.nav ul li ------> 0,0,1,2

a:hover -----—> 0,0,1,1

.nav a ------> 0,0,1,1

注意：

數(shù)位之間沒有進制比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不會存在10個div能趕上一個類選擇器的情況。

3) 繼承的權重是0

這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標簽有沒有被選中。

1) 如果選中了，那么以上面的公式來計權重。誰大聽誰的。

2) 如果沒有選中，那么權重是0，因為繼承的權重為0。

猜你喜歡：

CSS選擇器用法大全

最新資訊