CSS優先級算法的計算方法

本篇內容介紹了“CSS優先級算法的計算方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

關于CSS specificity

CSS 的specificity 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準，既然作為標準，就具有一套相關的判定規定及計算方式，specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。
在多個選擇符應用于同一個元素上那么Specificity值高的最終獲得優先級。

選擇符Specificity值列表：

規則：

1. 行內樣式優先級Specificity值為1,0,0,0，高于外部定義。
如：<div style=”color: red”>sjweb</div>
外部定義指經由<link>或<style>標簽定義的規則；
2.!important聲明的Specificity值最高；
3.Specificity值一樣的情況下，按CSS代碼中出現的順序決定，后者CSS樣式居上；
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

!important 的優先級最高

“CSS優先級算法的計算方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！