更新時間:2021-08-06 來源:黑馬程序員 瀏覽量:
層疊性是指多種CSS樣式的疊加,也是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上,那么這個時候一個屬性就會將另一個屬性層疊掉。
定義CSS樣式時,經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上
·選擇器相同,則執(zhí)行層疊性
·選擇器不同,就會出現(xiàn)優(yōu)先級的問題,就會涉及CSS權(quán)重計算。
下面我們詳解介紹CSS層疊性權(quán)重計算方法。
1) 權(quán)重計算公式
關(guān)于CSS權(quán)重,我們需要一套計算公式來去計算,這個就是 CSS Specificity(特殊性)
標簽選擇器 | 計算權(quán)重公式 |
---|---|
繼承或者 * | 0,0,0,0 |
每個元素(標簽選擇器) | 0,0,0,1 |
每個類,偽類 | 0,0,1,0 |
每個ID | 0,1,0,0 |
每個行內(nèi)樣式 style="" | 1,0,0,0 |
每個!important重要的 | ∞ 無窮大 |
·值從左到右,左面的最大,一級大于一級,數(shù)位之間沒有進制,級別之間不可超越。
·關(guān)于CSS權(quán)重,我們需要一套計算公式來去計算,這個就是 CSS Specificity(特殊性)
2) 權(quán)重疊加
我們經(jīng)常用交集選擇器,后代選擇器等,是有多個基礎(chǔ)選擇器組合而成,那么此時,就會出現(xiàn)權(quá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) 繼承的權(quán)重是0
這個不難,但是忽略很容易繞暈。其實,我們修改樣式,一定要看該標簽有沒有被選中。
1) 如果選中了,那么以上面的公式來計權(quán)重。誰大聽誰的。
2) 如果沒有選中,那么權(quán)重是0,因為繼承的權(quán)重為0。
猜你喜歡: