其實,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但是這並不說明ie6不支援important,只是支援上有些bug。看下面//會顯示blue
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...