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?

轉載于:https://www.cnblogs.com/love-sea520/p/5903196.html

總結

以上是生活随笔為你收集整理的CSS优先级算法是如何计算？的全部內容，希望文章能夠幫你解決所遇到的問題。

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