標籤:mic 實現 距離 tab 選中 權重 bmp border 頁面
假如同一個標籤被多個選取器選中,每個選取器都設定了相同的樣式,瀏覽器中載入時這個樣式聽誰的?
不同選取器設定的同一個樣式,只會選擇一個進行載入,不會疊加。
為瞭解決聽誰的問題,引入層疊性的概念。
層疊性:多個選取器選中同一個標籤,設定同一個樣式,瀏覽器中載入時,不會載入所有的屬性值,挑選其中一個載入,其中一個值層疊/覆蓋掉其他的值。
要實現層疊或覆蓋就涉及到比較,下面就是比較選取器之間的權重的比較,權重的比較一共有兩種情況: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中的層疊性及權重的比較