css選擇器的權重計算

2021-08-09 08:54:43 字數 1524 閱讀 3194

其實,css有自己的優先順序計算公式,而不僅僅是行間》內部》外部樣式;id>class>元素。

一、樣式型別

1、行間

2、內聯

3、外部

二、選擇器型別

1、id  #id

2、class  .class

3、標籤  p

4、通用  *

5、屬性  [type="text"]

6、偽類  :hover

7、偽元素  ::first-line

8、子選擇器、相鄰選擇器

三、權重計算規則

第一等:代表內聯樣式,如: style=」」,權值為1000。

第二等:代表id選擇器,如:#content,權值為0100。

第三等:代表類,偽類和屬性選擇器,如.content,權值為0010。

第四等:代表型別選擇器和偽元素選擇器,如div p,權值為0001。

萬用字元、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。

繼承的樣式沒有權值。

四、比較規則

1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較,前一等級相等才往後比。

無論是行間、內部和外部樣式,都是按照這個規則來進行比較。而不是直觀的行間》內部》外部樣式;id>class>元素。之所以有這樣的錯覺,是因為確實行間為第一等的權重,所以它的權重是最高的。而內部樣式可能一般寫在了外部樣式引用了之後,所以覆蓋掉了之前的。

在權重相同的情況下,後面的樣式會覆蓋掉前面的樣式。

萬用字元、子選擇器、相鄰選擇器等的。雖然權值為0000,但是也比繼承的樣式優先。

五、!important

!important 的作用是提公升優先順序,換句話說。加了這句的樣式的優先順序是最高的(比內聯樣式的優先順序還高)。

我顯示紅色

ie7+和別的瀏覽器對important的這種作用的支援度都很好。只有ie6有些bug

p

//會顯示blue

但是這並不說明ie6不支援important,只是支援上有些bug。看下面

pp//

這樣就會顯示的是red。說明ie6還是支援important的。

六、例項

a /*

特殊性值:0,0,0,1

*/div a

/*特殊性值:0,0,0,2

*/.demo a

/*特殊性值:0,0,1,1

*/.demo input[type="text"] /*

特殊性值:0,0,2,1

*/.demo *[type="text"] /*

特殊性值:0,0,2,0

*/#demo a

/*特殊性值:0,1,0,1

*/div#demo a

/*特殊性值:0,1,0,2

*/第一條應該是黃色

第三條應該是黑色

第四條應該是紅色

CSS選擇器權重計算

css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素,如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...

CSS 選擇器權重計算規則

下面從網易 規範中摘抄的內容,學習他們確定選擇器等級的方式。最近看了 精通css 這部分內容應該是從2.3節摘抄來的。選擇器等級 a 行內樣式style。b id選擇器的數量。c 類 偽類和屬性選擇器的數量。d 型別選擇器和偽元素選擇器的數量。選擇器等級 a,b,c,d style 1,0,0,0 ...

CSS 選擇器權重計算規則

其實,css有自己的優先順序計算公式,而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...