關(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值列表：
規(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è)類選擇符{.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
!important 的優(yōu)先級(jí)最高
【 微信掃一掃 】
