CSS 選擇器權(quán)重值
CSS 具有自己的優(yōu)先級計算方法，而不僅僅是行間>內(nèi)部>外部、ID>class>元素
1. 樣式類型
行間樣式
| <h1 style="font-size:12px;color:#000;">我的行間CSS樣式。</h1> |
內(nèi)聯(lián)樣式
| <style type="text/css"> h1{font-size:12px; color:#000; }</style> |
外部樣式
| <link rel="stylesheet" href="css/style.css"> |
2. 選擇器類型
| 選擇器 | 栗子 |
|---|---|
| ID | #id |
| class | .class |
| 標簽 | p |
| 屬性 | [type='text'] |
| 偽類 | :hover |
| 偽元素 | ::first-line |
| 相鄰選擇器、子代選擇器 | > + |
3. 權(quán)重計算規(guī)則
4. 比較規(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)先，0 權(quán)值比無權(quán)值優(yōu)先。
5. !important
!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級還高)。
| <style> p{color:red !important;}</style><p style="color:blue;">我顯示紅色</p> |
ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6-有些bug
| p{ color:red !important; color:blue; } //會顯示blue |
