本文小編為大家詳細(xì)介紹“css中的層疊性及權(quán)重是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css中的層疊性及權(quán)重是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)新民免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

層疊性：多個(gè)選擇器選中同一個(gè)標(biāo)簽，設(shè)置同一個(gè)樣式，瀏覽器中加載時(shí)，不會(huì)加載所有的屬性值，挑選其中一個(gè)加載，其中一個(gè)值層疊/覆蓋掉其他的值。

要實(shí)現(xiàn)層疊或覆蓋就涉及到比較，下面就是比較選擇器之間的權(quán)重的比較，權(quán)重的比較一共有兩種情況：1、選擇器選中了標(biāo)簽；2、選擇器沒(méi)有選中標(biāo)簽

首先說(shuō)一下選擇器的權(quán)重：id>class>標(biāo)簽>*(通配符)；

①選擇器選中了標(biāo)簽：

首先：如果都選中了標(biāo)簽，比較選擇器權(quán)重。

選擇器有權(quán)重，權(quán)重大的會(huì)層疊權(quán)重小的。

計(jì)算權(quán)重：選擇器選擇的范圍越大，權(quán)重反而越小。id>class>標(biāo)簽>*

方法：數(shù)選擇器的數(shù)量，先比較id個(gè)數(shù)→再比較class個(gè)數(shù)→最后比較標(biāo)簽個(gè)數(shù)。

其次：如果選擇器權(quán)重相同，比較css中代碼的書(shū)寫(xiě)順序。

css代碼有加載順序，從上往下加載，后面加載的會(huì)覆蓋前面加載。

#box1 .box2 .box3 p{ (1,2,1)

color: red;

}

.box1 #box2 .box3 p{ (1,2,1)

color: green;

}

.box1 .box2 #box3 p{ (1,2,1)書(shū)寫(xiě)順序最后，層疊前面的樣式 　　color: blue;

}

②選擇器都沒(méi)有選中標(biāo)簽：一部分樣式是可以繼承的。繼承誰(shuí)的？

首先：比較每個(gè)選擇器選中的元素，距離目標(biāo)元素p的在HTML中的距離，距離近的層疊距離遠(yuǎn)的。簡(jiǎn)稱(chēng)就近原則。

#box1{

color: red;

}

.box1 .box2{

color: green;

}

.box3{選中的標(biāo)簽距離p最近，繼承他的

color: blue;

}

其次：如果距離一樣近，比較權(quán)重，權(quán)重大的層疊權(quán)重小的。

#box1 .box2 #box3{ (2,1,0)

color: red;

}

.box1 #box2.box2 #box3{ (2,2,0)　　color: green;

}

.box1 .box2 #box3.box3{ (1,3,0)

color: blue;

}

再次：如果距離一樣近，選擇器權(quán)重一樣，看書(shū)寫(xiě)順序。

#box1 .box2 #box3.box3{

特殊的，在比較權(quán)重的過(guò)程中，有一個(gè)單詞important可以提升某一個(gè)樣式屬性的權(quán)重到最大。

比較就近原則，important對(duì)繼承性沒(méi)影響。

#box1 .box2 #box3.box3{

color: red;

}

#box3{

color: green !important;將這條屬性的權(quán)重提升的最大，與選擇器權(quán)重?zé)o關(guān)

}

#box1.box1 #box2 .box3{

color: blue;

}

讀到這里，這篇“css中的層疊性及權(quán)重是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。