css中的層疊性及權重的比較

本文轉載於:猿2048網站➫css中的層疊性及權重的比較

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

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

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

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

 

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

首先說一下選擇器的權重：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的行內式、內嵌式和外鏈式中，權重：行內>內嵌=外鏈，顧名思義不管內嵌式或者外鏈式的權重多大都抵不過一句行內式！

可是加了important以後，權重就會高於行內式。若是該屬性是繼承而來的，加了important無效，以行內爲準！