CSS Specificity--CSS特性、權重、優先級---CSS specificity規則、

CSS Specificity

As mentioned above, CSS styles follow an order of specificity and point values to determine(肯定) when styles override(覆蓋) one another or take precedence(優先). Nettuts recently had a nice article in which the point values for css were explained. They are like so:

• Elements - 1 points

• Classes - 10 points

• Identifiers - 100 points

• Inline Styling - 1000 points

When in doubt, get more specific with your style declarations(聲明). You can also use the !important declaration for debugging(調試) purposes if needed.

 

Read more about css specificity:

• HTML Dog on Specificity

• Smashing Magazine on CSS Specificity

中文：

CSS方面不少人都問過我，設定後的CSS後卻沒有效果，樣式失效，樣式衝突，
這種問題通常發生於新手，不少狀況下是忽視了CSS中的權重specificity，
我試總結關於specificity方面的一些規則、算法及實例
但願對新人能有所幫助~！
做者：孫佳（http://www.sjweb.cn/ 貌似連接不可用了）

關於CSS specificity
CSS 的specificity 特性或稱非凡性，它是衡量一個衡量CSS值優先級的一個標準，既然做爲標準，就具備一套相關的斷定規定及計算方式，specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。

在多個選擇符應用於同一個元素上那麼Specificity值高的最終得到優先級。

選擇符Specificity值列表

Selectors 選擇符	Syntax Samples 語法	ensample 示例	Specificity 特性
通配選擇符(Universal Selector)	*	*.div { width:560px;}	0,0,0,0
類型選擇符(Type Selectors)	E1	td { font-size:12px;}	0,0,0,1
僞類選擇符(Pseudo-classes Selectors)	E1:link	a:link { font-size:12px;}	0,0,1,0
屬性選擇符(Attribute Selectors)	E1[attr]	h[title] {color:blue;}	0,0,1,0
ID選擇符(ID Selectors)	#sID	#sj{ font-size:12px;}	0,1,0,0
類選擇符(Class Selectors)	E1.className	.sjweb{color:blue;}	0,0,1,0
子對象選擇符(Child Selectors)	E1 > E2	body > p {color:blue;}	E1+E2
相鄰選擇符(Adjacent Sibling Selectors)	E1 + E2	div + p {color:blue;}	E1+E2
選擇符分組(Grouping)	E1,E2,E3	.td1,a,body {color:blue;}	E1+E2+E3
包含選擇符(Descendant Selectors)	E1 E2	table td {color:blue;}	E1+E2

規則：1. 行內樣式優先級Specificity值爲1,0,0,0，高於外部定義。如：<div style=」color: red」>sjweb</div>外部定義指經由<link>或<style>標籤訂義的規則；2.!important聲明的Specificity值最高；3.Specificity值同樣的狀況下，按CSS代碼中出現的順序決定，後者CSS樣式居上；4.由繼續而獲得的樣式沒有specificity的計算，它低於一切其餘規則(好比全局選擇符*定義的規則)。算法：當遇到多個選擇符同時出現時候按選擇符獲得的Specificity值逐位相加，{數位之間沒有進制 好比說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}就獲得最終計算得的specificity，而後在比較取捨時按照從左到右的順序逐位比較。實例分析：1.div { font-size:12px;}分析：1個元素{ div}，Specificity值爲0,0,0,12.body div p{color: green;}分析：3個元素{ body div p }，Specificity值爲0,0,0,33.div .sjweb{ font-size:12px;}分析：1個元素{ div }，Specificity值爲0,0,0,11個類選擇符{.sjweb}，Specificity值爲0,0,1, 0最終：Specificity值爲 0,0,1,14.Div # sjweb { font-size:12px;}分析：1個元素{ div }，Specificity值爲0,0,0,11個ID選擇符{sjweb}，Specificity值爲0,1,0, 0最終：Specificity值爲 0,1,0,15.html > body div [id=」totals」] ul li > p {color:red;}分析：6個元素{ html body div ul li p} Specificity值爲0,0,0,61個屬性選擇符{ [id=」totals」] } Specificity值爲0,0,1,02個其餘選擇符{ > > } Specificity值爲0,0,0,0最終：Specificity值爲 0,0,1,6