原文地址： CSS 選擇器權(quán)重計算規(guī)則

其實，CSS有自己的優(yōu)先級計算公式，而不僅僅是行間>內(nèi)部>外部樣式；ID>class>元素。

一、樣式類型

1、行間

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

2、內(nèi)聯(lián)

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

3、外部

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

二、選擇器類型

1、ID　　#id
2、class　　.class
3、標簽　　p
4、通用　　*
5、屬性　　[type="text"]
6、偽類　?。篽over
7、偽元素　　::first-line
8、子選擇器、相鄰選擇器

三、權(quán)重計算規(guī)則

第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
第二等：代表ID選擇器，如：#content，權(quán)值為0100。
第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。
第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。
繼承的樣式?jīng)]有權(quán)值。

四、比較規(guī)則

1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較，前一等級相等才往后比。
無論是行間、內(nèi)部和外部樣式，都是按照這個規(guī)則來進行比較。而不是直觀的行間>內(nèi)部>外部樣式；ID>class>元素。之所以有這樣的錯覺，是因為確實行間為第一等的權(quán)重，所以它的權(quán)重是最高的。而內(nèi)部樣式可能一般寫在了外部樣式引用了之后，所以覆蓋掉了之前的。
在權(quán)重相同的情況下，后面的樣式會覆蓋掉前面的樣式。
通配符、子選擇器、相鄰選擇器等的。雖然權(quán)值為0000，但是也比繼承的樣式優(yōu)先。

五、！important

1、!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級還高)。

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

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

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

但是這并不說明ie6不支持important，只是支持上有些bug?？聪旅?/h6>

p{
color:red !important;
}
p{
color:blue;
}
//這樣就會顯示的是red。說明ie6還是支持important的。

六、實例

a{color: yellow;} /特殊性值：0,0,0,1/
div a{color: green;} /特殊性值：0,0,0,2/
.demo a{color: black;} /特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;} /特殊性值：0,0,2,1/
.demo [type="text"]{color: grey;} /特殊性值：0,0,2,0*/

demo a{color: orange;} /特殊性值：0,1,0,1/

div#demo a{color: red;} /特殊性值：0,1,0,2/

<a href="">第一條應該是黃色</a>
<div class="demo">
<input type="text" value="第二條應該是藍色" />
<a href="">第三條應該是黑色</a>
</div>
<div id="demo">
<a href="">第四條應該是紅色</a>
</div>