Posted on 2007-09-15 16:10
愚人 閱讀(372)
評論(0) 編輯 收藏 所屬分類:
Xhtml/css
原文：CSS Specificity: Things You Should Know
如果頁面制作的時候遇到定義的CSS不起作用，你可能遇到了CSS優先級的問題。CSS優先級在CSS里算是比較難懂的部分，不同權重的CSS選擇器有可能就是你出錯的原因，所以作為頁面開發人員必須了解CSS優先級特性。
CSS優先級特性概述：
1. 通過優先級計算，讓瀏覽器先解析哪條CSS規則。
2. 優先級特性經常是你定義的CSS規則不起作用的原因，雖然你認為起了作用，然而卻不是。
3. 每個選擇器都有它的優先級層次。
4. 如果兩個規則同時作用于一個元素，優先級高的獲勝。
5.優先級特性可以分為四類：inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下這兩篇文章， CSS Specificity Wars和CSS Specificity for Poker Players
7.如果選擇器有兩個等級相同的值，后面的值會覆蓋前面的值。
8.如果選擇器有等級不同的值，以等級高的算，比如!important。
9.擁有更多優先特性選擇器的規則更具有優先特性。
10.后面的規則肯定會覆蓋前面相同的規則。
11.內嵌的CSS規則優先級特性最高。
12.CSS文件里，ID的優先級特性最高。
13.想要增加優先級，可以使用ID。
14.class比element級別高。
15.選擇器分為四個級別，計算方式 0,0,0,0。
16.推薦一個CSS優先級計算器，CSS Specificity Calculator.。
什么是優先級特性
優先級計算是為了決定瀏覽器解析哪條規則。“優先級特性的權重關系CSS的顯示。”Understanding Specificity （明白優先級特性）。
選擇器的優先級特性決定了同一個元素多條規則下哪條規則實施。Selector Specificity （選擇器優先級）。
每個選擇器都有優先級，兩個選擇器作用與同一個元素，優先級高的獲勝。
CSS優先級級別：
1. Inline styles 內嵌頁面的CSS樣式，比如<h1 style=”color:#000″></h1>
2.IDs 比如#myid
3.Classes, attributes and pseudo-classes 比如 .classes, [attributes]:hover, :focus
4.Elements and pseudo-elements 比如 div,p,h1,包括:before和:after
怎樣測量優先級？
內嵌的為1000，ID為100，Classes, attributes and pseudo-classes為10，Elements and pseudo-elements 為1。
body #content .data img:hover 這里的特性值為 0,1,2,2
下面這張星球大戰的圖片也許能幫助你記憶：
來測試下吧
| 1 |
* { } |
0 |
| 3 |
li:first-line { } |
2 (one element, one pseudo-element) |
| 5 |
ul ol+li { } |
3 (three elements) |
| 7 |
ul ol li.red { } |
13 (one class, three elements) |
| 9 |
style=”” |
1000 (one inline styling) |
| 11 |
div p { } |
2 (two HTML selectors) |
| 13 |
div p.sith { } |
12 (two HTML selectors and a class selector) |
| 15 |
body #darkside .sith p { } |
112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) |
實際經驗：
1. 使用LVHA定義鏈接，即link-visited-hover-active，參考[Link Specificity]
2. 如果不是為了兼容瀏覽器，最好不要使用 !important
3. 使用ID讓特性更具體，比如a.high寫成 ul#blog li a.high
CSS工具與資 英文好的去看下
CSS Specificity for Poker Players
CSS specificity calculator
Understanding Specificity Tutorial
Cascade Inheritance: Specificity
CSS 2.1 Selectors Explained
CSS Specificity Bugs in IE
CSS Structure and Rules
Specificity