如何理解Css Specificity

 

除了浮動特性,CSS Specificity特性也是樣式表中較為難理解的概念之一.在通常情況下,你認為一些應該應用到元素的CSS規則為何瀏覽器沒有應用到.為了盡量花少 時間去排錯,你需要去瞭解瀏覽器是如何解釋你的樣式代碼;另外,你還需要系統地理解CSS Specificity特性是如何工作的.類似此類問題大多數原因是在樣式表中的另一個位置定義了更特殊的選取器.

Css Specificity雖不簡單,然而,還是有辦法用簡單直觀地方式介紹它.

Css Specificity概覽

1. Specificity特性決定哪些CSS規則應用於用戶端瀏覽器.
2. 優先順序是你的CSS規則通常應該不到一些元素的原因，包括你認為應該應用到的。
3. 每個選擇符都有它自身的層級數。
4. 如果兩個選擇符屬性同時應用於同一個元素，優先順序高的生效。
5. 可分為四種明顯的優先順序類別：inline style,IDs,classes+attributes,elements
6. 如你喜歡星球大戰的話可看看：CSS Specificity Wars
7. 如你喜歡紙牌遊戲的話可看看：CSS Specificity for Poker Players
8. 當Speficity值相等時，後來選擇符居上。
9. 當Speficity值不相等時，Speficity值高的選擇符生效。
10. 越具體的選擇符越有更高的優先順序數
11. 最後的CSS規則將覆蓋任何之前或衝突的CSS規則。
12. 內置樣式的Speficity值高於其它。
13. ID選擇符比屬性選擇符Speficity值要高。
14. 你可用IDs去提高選擇符的Speficity值
15. class選擇符高於大部分的元素選擇符
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.

另外，!important規則高於一切，慎用；繼承的樣式屬式不參與優先順序數值計算，低於其它規則。

因為每種選擇符都有它自身的優Speficity值，下面看看具體的計算規則：

• Inline style(內置樣式)，即直接寫在元素裡面，加1,0,0,0，E.g. <h1 style=”color:#fff;”>
• IDs(ID選擇符)，加0,1,0,0，E.g.#div
• classes+attributes(Class選擇符、屬性選擇符和偽類)，加0,0,1,0，E.g. .classes、[attributes]、:hover,#focus
• elements(每個元素或虛擬元素），加 0,0,0,1。E.g. :firstchild
• Others(其他選擇符），加 0,0,0,0。 E.g. * >

如何計算Speficity值？

• 記住如何計算Speficity值，“從0開始，加1000給style屬性，加100給每個ID選擇符，加10給每個屬性選擇符、Class或 偽類，加1給每個元素名或虛擬元素。因此
  body #content .data img:hover
  的Speficity值就為：122(0,1,2,2 或0122)：100給#content ，10給.data，10給:hover，1給body，1給img.”
• 另外可選擇一種計算方式：計算每個ID選擇符（=a），計算每個屬性選擇符(=b)，計算每個元素或虛擬元素(=c)，串連這三個值 a-b-c 即得出Speficity值。
• 下面有張圖可協助我們更加直觀的瞭解如何計算Speficity值

動手測試

1	* { }	0
2	li { }	1 (one element)
3	li:first-line { }	2 (one element, one pseudo-element)
4	ul li { }	2 (two elements)
5	ul ol+li { }	3 (three elements)
6	h1 + *[rel=up] { }	11 (one attribute, one element)
7	ul ol li.red { }	13 (one class, three elements)
8	li.red.level { }	21 (two classes, one element)
9	style=””	1000 (one inline styling)
10	p { }	1 (one HTML selector)
11	div p { }	2 (two HTML selectors)
12	.sith	10 (one class selector)
13	div p.sith { }	12 (two HTML selectors and a class selector)
14	#sith	100 (one id selector)
15	body #darkside .sith p { }	112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

About this entry

You’re currently reading “如何理解Css Specificity,” an entry on Jaybird

Published:

8.10.08 / 12pm

Category:

Front-end

Tags:

Css Speficity

 

原文連結：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-
you-should-know/
翻譯：http://www.obird.net/web-standards/%E5%A6%82%E4
%BD%95%E7%90%86%E8%A7%A3css-specificity/