2019獨角獸企業重金招聘Python工程師標準>>>

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,1

2.body div p{color: green;}
分析：
3個元素{ body div p }，Specificity值為0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1個元素{ div }，Specificity值為0,0,0,1
1個類選擇符{.sjweb}，Specificity值為0,0,1, 0
最終：Specificity值為 0,0,1,1

4.Div # sjweb { font-size:12px;}
分析：
1個元素{ div }，Specificity值為0,0,0,1
1個ID選擇符{sjweb}，Specificity值為0,1,0, 0
最終：Specificity值為 0,1,0,1


5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6個元素{ html body div ul li p} Specificity值為0,0,0,6
1個屬性選擇符{ [id=”totals”] } Specificity值為0,0,1,0
2個其他選擇符{ > > } Specificity值為0,0,0,0
最終：Specificity值為 0,0,1,6

轉載于:https://my.oschina.net/fornews/blog/365670

總結

以上是生活随笔為你收集整理的CSS Specificity--CSS特性、权重、优先级---CSS specificity规则、的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。