css中的層疊性及權重是什么

本文小編為大家詳細介紹“css中的層疊性及權重是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css中的層疊性及權重是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

層疊性：多個選擇器選中同一個標簽，設置同一個樣式，瀏覽器中加載時，不會加載所有的屬性值，挑選其中一個加載，其中一個值層疊/覆蓋掉其他的值。

要實現層疊或覆蓋就涉及到比較，下面就是比較選擇器之間的權重的比較，權重的比較一共有兩種情況：1、選擇器選中了標簽；2、選擇器沒有選中標簽

首先說一下選擇器的權重：id>class>標簽>*(通配符)；

①選擇器選中了標簽：

首先：如果都選中了標簽，比較選擇器權重。

選擇器有權重，權重大的會層疊權重小的。

計算權重：選擇器選擇的范圍越大，權重反而越小。id>class>標簽>*

方法：數選擇器的數量，先比較id個數→再比較class個數→最后比較標簽個數。

其次：如果選擇器權重相同，比較css中代碼的書寫順序。

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

#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) 書寫順序最后，層疊前面的樣式 　　color: blue;

}

②選擇器都沒有選中標簽：一部分樣式是可以繼承的。繼承誰的？

首先：比較每個選擇器選中的元素，距離目標元素p的在HTML中的距離，距離近的層疊距離遠的。簡稱就近原則。

#box1{

color: red;

}

.box1 .box2{

color: green;

}

.box3{ 選中的標簽距離p最近，繼承他的

color: blue;

}

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

#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;

}

再次：如果距離一樣近，選擇器權重一樣，看書寫順序。

#box1 .box2 #box3.box3{

特殊的，在比較權重的過程中，有一個單詞important可以提升某一個樣式屬性的權重到最大。

比較就近原則，important對繼承性沒影響。

#box1 .box2 #box3.box3{

color: red;

}

#box3{

color: green !important; 將這條屬性的權重提升的最大，與選擇器權重無關

}

#box1.box1 #box2 .box3{

color: blue;

}

讀到這里，這篇“css中的層疊性及權重是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。