2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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(優(yōu)先). 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(調(diào)試) purposes if needed.

?

Read more about css specificity:

• HTML Dog on Specificity

• Smashing Magazine on CSS Specificity

中文：

CSS方面很多人都問過我，設(shè)定后的CSS后卻沒有效果，樣式失效，樣式?jīng)_突，
這種問題一般發(fā)生于新手，很多情況下是忽視了CSS中的權(quán)重specificity，
我試總結(jié)關(guān)于specificity方面的一些規(guī)則、算法及實(shí)例
希望對新人能有所幫助~！
作者：孫佳（http://www.sjweb.cn/?貌似鏈接不可用了）

關(guān)于CSS specificity
CSS 的specificity 特性或稱非凡性，它是衡量一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn)，既然作為標(biāo)準(zhǔn)，就具有一套相關(guān)的判定規(guī)定及計(jì)算方式，specificity用一個(gè)四位的數(shù)字串(CSS2是三位)來表示，更像四個(gè)級(jí)別，值從左到右，左面的最大，一級(jí)大于一級(jí)，數(shù)位之間沒有進(jìn)制，級(jí)別之間不可超越。

在多個(gè)選擇符應(yīng)用于同一個(gè)元素上那么Specificity值高的最終獲得優(yōu)先級(jí)。

選擇符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

規(guī)則：
1. 行內(nèi)樣式優(yōu)先級(jí)Specificity值為1,0,0,0，高于外部定義。
如：<div style=”color: red”>sjweb</div>
外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)則；
2.!important聲明的Specificity值最高；
3.Specificity值一樣的情況下，按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；
4.由繼續(xù)而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。

算法：
當(dāng)遇到多個(gè)選擇符同時(shí)出現(xiàn)時(shí)候
按選擇符得到的Specificity值逐位相加，
{數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最終計(jì)算得的specificity，
然后在比較取舍時(shí)按照從左到右的順序逐位比較。

實(shí)例分析：
1.div { font-size:12px;}
分析：
1個(gè)元素{ div}，Specificity值為0,0,0,1

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

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

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


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

轉(zhuǎn)載于:https://my.oschina.net/fornews/blog/365670

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。