CSS 選擇器權重計算規則

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

一、樣式型別

1、行間

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 的作用是提公升優先順序，換句話說。加了這句的樣式的優先順序是最高的（比內聯樣式的優先順序還高)。

我顯示紅色

p

//會顯示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
*/第一條應該是黃色
第三條應該是黑色
第四條應該是紅色

第一優先順序：無條件優先的屬性只需要在屬性後面使用！important。它會覆蓋頁面內任何位置定義的元素樣式。ie6不支援該屬性。

第三優先順序：由乙個或多個id選擇器來定義。例如，#id會覆蓋.classname

第四優先順序：由乙個或多個類選擇器、屬性選擇器、偽類選擇器定義。如.classname會覆蓋div

第五優先順序：由乙個或多個型別選擇器定義。如div覆蓋*

第六優先順序：通配選擇器，如*

如果遇到了似乎沒有起作用的css規則，很可能是出現了特殊性衝突。這時可以在選擇器中新增他的乙個父元素的id，從而提高他的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規則，他覆蓋了你的規則。此時需要檢查**，解決特殊性衝突，讓**盡可能的簡潔。

**： 

CSS 選擇器權重計算規則

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

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