网站911国产亚洲精品青衣,5566成人免费视频网站

【ES三周年】一文弄懂css權(quán)重-天天訊息

2023-04-11 20:24:11來源：騰訊云

對于初學(xué)者來說，在修改網(wǎng)頁樣式時可能偶爾會有這個疑問：為什么我添加了樣式但不生效呢？

這時候就需要了解權(quán)重（weight）相關(guān)知識了

css的權(quán)重判斷一般來說有四類

(資料圖片)

important（最優(yōu)先）和行內(nèi)樣式（次優(yōu)先）ICE權(quán)重值（后文說明）最基礎(chǔ)的一條，就是選擇器匹配，簡單來說就是css代碼對應(yīng)的html元素先后順序（后寫的覆蓋先寫的）

這里的順序類似css的判斷順序，即第一點如果不符，那就順延第二點，都不符合，那就按最后的先后順序兜底

其他幾條比較好理解，本文著重講講【ICE權(quán)重】

什么是【ICE】呢？聽起來高大上，其實只是ID，Class，Element的縮寫罷了，即id選擇器，class選擇器和html元素，按照ICE的順序來算，也就是說

id > class > html

怎么計算呢？凡是元素有被對應(yīng)選擇器選擇到，就在對應(yīng)位數(shù)上+1，比如說一個html元素有兩個class名，那么權(quán)重就是0-2-0

注意，權(quán)重是相對【一段css代碼】，而不是相對元素

比如

這種情況，id，class和元素選擇器互相有重復(fù)的屬性，那么雖然對象是同一個元素，但這個元素【沒有】權(quán)重值的概念

沒有說元素的權(quán)重是1-1-1，而是第一個段css代碼權(quán)重0-0-1，第二段0-1-0，第三段1-0-0，那么根據(jù)規(guī)則，自然是1-0-0最大，所以顏色值為#f00cec

第二個注意點，不要簡單認(rèn)為ICE是三位數(shù)，他們每一位都是【獨立】計算的

簡單來說就是“官大一級壓死人”，即便0-0-11（如果按位數(shù)算是11），也大不過0-1-0，當(dāng)然，很少會出現(xiàn)這種場景，了解即可

第三個注意點：如果權(quán)重剛好相等怎么辦？其實可以直接根據(jù)上述四點來判斷，可以得出答案是順序

即【后面的覆蓋前面的】

第四個注意點：繼承的樣式【沒有】權(quán)重，這個簡單理解即可

例如body標(biāo)簽有個font-size設(shè)置字體大小為16px，那么body標(biāo)簽的子元素（例如有個p標(biāo)簽），也會繼承16px的樣式，但是這段代碼的權(quán)重和該標(biāo)簽其他的權(quán)重比較時算作0-0-0，因為并不是直接選中了該標(biāo)簽

標(biāo)簽：

相關(guān)新聞