css權(quán)重優(yōu)先級(jí)是如何計(jì)算的？【CSS教程】

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

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

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

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

下面我們詳解介紹CSS層疊性權(quán)重計(jì)算方法。

1) 權(quán)重計(jì)算公式

關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity(特殊性)

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

·關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity(特殊性)

2) 權(quán)重疊加

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

就是一個(gè)簡單的加法計(jì)算

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ù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。

3) 繼承的權(quán)重是0

這個(gè)不難，但是忽略很容易繞暈。其實(shí)，我們修改樣式，一定要看該標(biāo)簽有沒有被選中。

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

2) 如果沒有選中，那么權(quán)重是0，因?yàn)槔^承的權(quán)重為0。

猜你喜歡：

CSS動(dòng)畫和JS動(dòng)畫有什么區(qū)別？

CSS是什么意思？CSS的全稱是什么？

什么是CSS選擇器？如何使用？

Css中如何清理浮動(dòng)？

常用css樣式大全[2020最新整理版]

黑馬程序員web前端開發(fā)培訓(xùn)課程