CSS 選擇器權重值

CSS 具有自己的優先級計算方法，而不僅僅是行間>內部>外部、ID>class>元素

1. 樣式類型

行間樣式

<h1 style="font-size:12px;color:#000;">我的行間CSS樣式。</h1>

內聯樣式

<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>

外部樣式

<link rel="stylesheet" href="css/style.css">

2. 選擇器類型

3. 權重計算規則

內聯樣式，如: style="…"，權值為1000。
ID選擇器，如：#content，權值為0100。
類，偽類、屬性選擇器，如.content，權值為0010。
類型選擇器、偽元素選擇器，如div p，權值為0001。
通配符、子選擇器、相鄰選擇器等。如* > +，權值為0000。
繼承的樣式沒有權值

4. 比較規則

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

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

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

通配符、子選擇器、相鄰選擇器等的。雖然權值為0000，但是也比繼承的樣式優先，0 權值比無權值優先。

5. !important

!important 的作用是提升優先級，換句話說。加了這句的樣式的優先級是最高的（比內聯樣式的優先級還高)。

<style>
p{color:red !important;}
</style>
<p style="color:blue;">我顯示紅色</p>　

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

p{
color:red !important;
color:blue;
} //會顯示blue

但是這并不說明ie6不支持important，只是支持上有些bug。

p{color:red !important; }