CSS選擇器權重比較的筆記總結

2021-09-05 11:46:23 字數 1875 閱讀 3723

行間樣式:

黑色背景

id選擇器:

#box 

藍色背景

class選擇器(偽類選擇器不列舉):

.box1 

紅色背景

標籤選擇器(偽元素選擇器不列舉):

div

粉色背景

萬用字元選擇器:

* 

綠色背景

#box 

.box1

div *

黑色背景

結果將很明顯是黑色背景。

因為css選擇器權重之間的比較!單從以上,可以得出在權重的比較上:行間樣式》id選擇器》class選擇器和偽類選擇器》標籤選擇器和偽元素選擇器》萬用字元選擇器,這樣的初步結論,但是這在複雜選擇器組合中很不適用!詳細參考各種多層級的複雜選擇器。

權重是什麼?可以理解為css樣式應用在html元素上的優先順序。詳細定義什麼的,很多了。

行間樣式:1,0,0,0

id選擇器:0,1,0,0

class選擇器/偽類選擇器:0,0,1,0

標籤選擇器/偽元素選擇器:0,0,0,1

萬用字元選擇器:0,0,0,0

一、網傳:數值相加比較

1個id的權重就是1000,兩個就是2000,以此類推,乙個class是100,兩個是200,tag是10,*(星號)是0,

注:有乙個「!important",寫在屬性後面,它的權重是10000.

這種方式,確實很好的反應了權重比較的結果,

比如:(1) #box .name div.age 的權重可以認為是1000+100+10+100=1210;

(2) .class div div#*** div 的權重可以認為是100+10+10+1000+10=1130;

如果兩組選擇器選出的是同乙個div元素,那麼由於1210>1130,該div的背景顏色會被設定為灰色,而不是黑色。

這裡有乙個問題,就是這裡的10000,1000,100,10,0這些數字的進製是多少?

當然不會是十進位制,這個很好測試出來,也不是十六進製制,也不是三十二進位制……

(能力有限,本人測試的最高進製為259,即259層div和1個id選擇器比較,此時仍然使用id選擇器定義的樣式!!!!)

因此,私以為,這種比較方式雖然能解決問題,但其實似乎並不是很靠譜……

二、網傳:順序按位比較(個人稱呼)

即選擇器的權重為四位,從左往右,依次對比相同位上的數值大小,相同則比較下一位。

比如:id選擇器的權重位:0,1,0,0

class選擇器的權重為:0,0,1,0

還是上面的例子

(1) #box .name div.age 的權重可以認為是 0,1,(1+1),1 =》0,1,2,1;

(2) .class div div#*** div 的權重可以認為是 0,1,1,(1+1+1) =》 0,1,1,3;

比較時,先比較左邊第一位,都是0,

比較下一位,都是1,

再比較下一位,此時(1)在此為的權重為2,(2)在此位的權重為1,

後面一位便不再比較,直接使用(1)定義的樣式。

使用此種比較方式有一點好處就是,不必考慮選擇器的權重數值的進製。

總結:css選擇器的權重真讓人糾結,要是有大神有權重的權威解釋,希望能給個提示,抱拳。

私以為,css選擇器的比較應該是採用第二種,個人在今後未**到真諦之前,也將使用這樣的比較方式去判斷(廢話)……

css選擇器 權重

基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫,建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深,一定能夠被選上 3 選擇頁面所有的,而不是具體某乙個 標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...

CSS選擇器權重問題

原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...

css選擇器權重介紹

選擇器與偽元素的權重情況 高權重的選擇會覆蓋低權重的展示樣式 選擇器表示式或示例 說明權重 行內選擇器 style 1000 id選擇器 aaa 100類選擇器 aaa 10標籤選擇器 h1元素的tagname 1屬性選擇器 img alt div class pus 10相鄰選擇器 selecte...