教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

CSS層疊性權(quán)重計(jì)算方法【CSS教程】

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

好口碑IT培訓(xùn)


層疊性是指多種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ì)算。

下面我們?cè)斀饨榻BCSS層疊性權(quán)重計(jì)算方法。


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

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

層疊性權(quán)重計(jì)算方法
標(biāo)簽選擇器 計(jì)算權(quán)重公式
繼承或者 * 0,0,0,0
每個(gè)元素(標(biāo)簽選擇器) 0,0,0,1
每個(gè)類,偽類 0,0,1,0
每個(gè)ID 0,1,0,0
每個(gè)行內(nèi)樣式 style="" 1,0,0,0
每個(gè)!important重要的 ∞ 無(wú)窮大

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

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


2) 權(quán)重疊加

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

就是一個(gè)簡(jiǎn)單的加法計(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) 如果選中了,那么以上面的公式來(lái)計(jì)權(quán)重。誰(shuí)大聽誰(shuí)的。

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



猜你喜歡:

CSS選擇器用法大全

unicode字體是什么?

CSS是什么意思?史上最詳細(xì)介紹

CSS3相比CSS有哪些優(yōu)勢(shì)?

什么是HTML,什么是H5?

傳智教育web前端開發(fā)培訓(xùn)課程

0 分享到:
和我們?cè)诰€交談!