CSS優先級算法是如何計算?


CSS的specificity特性或非凡性,它是一個衡量css優先級的一個標准,

既然的標准就有判定規定和計算方式,specificity用一個四位數來表示,

更像四級從左到右,左的最大級,一級大於一級,數位之間沒有進制,

多個選擇符用到同一個元素上時那么specificity上值高的最終獲得優先級。

 

css specificity

規則

1、行內樣式優先級specificity值為1,0,0,0 高於外部定義

  如<div style="height:50px; width:50px;">Div</div>  //行內樣式

  外部定義指經由<link>或<style>標簽定義的規則                                                    

2、按CSS代碼中出現的順序決定,后者CSS樣式居上;(近水樓台 先得月)

3、!important聲明specificity值優先級最高

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個類選擇符{.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 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM