css的層疊性與權重的講解

假如同一個標籤被多個選擇器選中，每個選擇器都設定了相同的樣式，瀏覽器中載入時這個樣式聽誰的？

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

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

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的層疊性與權重的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！