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

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

既然的標準就有斷定規定和計算方式，specificity用一個四位數來表示，

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

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

 

css specificity

規則

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

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

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

二、按CSS代碼中出現的順序決定，後者CSS樣式居上；（近水樓臺 先得月）

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

四、由繼續而獲得的樣式沒有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