不同選擇器設置的同一個樣式，只會選擇一個進行加載，不會疊加。

為了解決聽誰的問題，引入層疊性的概念。

CSSyangshi_10628_1.html' target='_blank'>CSS樣式層疊權重值

根據CSS規范，具體性越明確的樣式規則，權重值越高。計算權重值的依據，并不是許多文章所描述的那樣“class是10，標簽是1，ID是100”之類——雖然這樣在大多數情況下能夠得到正確的結果。

首先來看一個便于記憶的順序”important 內聯 ID 類 標簽 |偽類|屬性選擇 偽對象 繼承 通配符”

選擇器權重值的計算

A：如果規則是寫在標簽的style屬性中（內聯樣式），則A=1，否則，A=0. 對于內聯樣式，由于沒有選擇器，所以B、C、D的值都為0，即A=1, B=0, C=0, D=0（簡寫為1,0,0,0，下同）。

B：計算該選擇器中ID的數量。如果有則B=1，沒有B=0（例如，#header 這樣的選擇器，計算為0, 1, 0, 0）。

C：計算該選擇器中偽類及其它屬性的數量（包括class、屬性選擇器等，不包括偽元素）。（例如， .logo[id= site-logo ] 這樣的選擇器，計算為0, 0, 2, 0）（后面將進一解釋為什么會是0,0,2,0）。

D：計算該選擇器中偽元素及標簽的數量。（例如，p:first-letter 這樣的選擇器，計算為0, 0, 0, 2）。

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

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

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

①選擇器選中了標簽：

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

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

計算權重：選擇器選擇的范圍越大，權重反而越小。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{ color: red; .box1 #box2.box2 #box3{ color: green; #box1.box1 #box2 .box3{ color: blue; }

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

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

 #box1 .box2 #box3.box3{ color: red; #box3{ color: green !important; 將這條屬性的權重提升的最大，與選擇器權重無關 #box1.box1 #box2 .box3{ color: blue; }

綜上所述：

最后：

移上比較都是以css內嵌式為例，在css的行內式、內嵌式和外鏈式中，權重：行內 內嵌=外鏈，顧名思義無論內嵌式或者外鏈式的權重多大都抵不過一句行內式！

以上就是css的層疊性與權重的講解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。