CSS 特殊性詳解

以前學CSS一直沒有深刻的去研究CSS選擇器的優先級，此次好好的看了下以後寫的時候特殊性值彷彿都浮如今眼前，如今寫的時候內心更加清晰，這裏梳理一下學到的東西。

特殊性(specificity)

咱們能夠用不少種寫法來定位一個元素，而選擇器的特殊性值則是決定哪個勝出的關鍵。選擇器的特殊性值其實很簡單，就是 0,0,0,1/0,1,0,1/0,0,0,5/... 的形式。

主要有四個規則:

1. 用了ID +0,1,0,0

2. 用class、屬性(如[id="btn1"])、僞類(如:hover) +0,0,1,0

3. 元素和僞元素(如::before) 加0,0,0,1

4. 結合符對特殊性沒有貢獻,而通配符的貢獻是0,0,0,0.(因此他們對總特殊性沒有影響)

那麼最前面的0呢?其實這個是留給內聯樣式的的~因此內聯樣式的特殊性最高,是1,0,0,0.

接下來咱們再看幾個例子相信能更好地理解:

p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)

html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)

咱們注意到第二組儘管第一個的特殊性值的最後一part已經達到了7，可是仍是輸給了0,1,0,1.特殊性值並非簡單的進制相加和比較,而是從左向右排序的,,只要前面比你大,無論後面你是7仍是77,都比你特殊性高。如1,0,0,0大於0,10,0,0.

這是從網上找到的一張圖~頗有意思.

最後一點則是重要聲明:

p.dark{color: #333 !important;}

重要聲明並無貢獻特殊性值,可是重要聲明老是會覆蓋非重要聲明,因此咱們能夠把重要聲明和非重要生命分爲兩組，非重要聲明使用特殊性值來解決衝突，重要聲明的衝突會在重要聲明內部解決.

繼承

繼承很簡單,後代元素樣式會繼承父元素的樣式.
可是顯然邊框，盒子模型的外邊距、內邊距等等都是不能繼承的。
繼承的值不貢獻特殊性,咱們要注意這和0,0,0,0特殊性是有區別的.
0,0,0,0特殊性會優先於無特殊性.

*{color: gray}
h1{color: black}

<h1>css <em>specificity</em></h1>

em中的字體顏色會是灰色的,由於0特殊性比繼承值優先級高.

層疊

CSS其實不就叫層疊樣式表嘛(cascading style sheet),因此層疊是CSS最核心的概念,而層疊其實就是結合咱們前面所說的特殊性和繼承作到的.
CSS的層疊規則以下:

1. 找出全部相關的規則,這些規則都包含與一個給定元素匹配的選擇器。

2. 按顯式權重對應用到該元素的全部聲明排序2）按照顯式權重對應用到該元素的全部聲明排序。標誌！important的規則的權重要高於沒有！important標誌的規則。按照來源對應用到給定元素的全部聲明排序。共有3種來源，創做人員，讀者和用戶代理。正常狀況下，創做人員 > 讀者模式 > 用戶代理的默認樣式。

3. 按照特殊性對應用到給定元素的全部聲明排序。有較高特殊性的元素權重要大於有較低的特殊性的元素。

4. 按照出現的順序應用到給定元素的全部聲明排序。一個聲明在樣式表或文檔中越後出現，它的權重就越大。若是樣式表中右導入的樣式表，通常認爲出如今導入樣式表中的聲明在前，主樣式表中的全部聲明在後。

css權威指南balabala了這一大段,仍是簡單點來描述吧.

首先咱們肯定來源
讀者的重要聲明>創做人員的重要聲明>創做人員的正常聲明>讀者的正常聲明>用戶代理聲明.
(讀者的聲明就是用戶自定義的樣式,好比在設置中改變字體大小.)

而後再按特殊性排序,特殊性值高的優先級高.

若是特殊性值仍是同樣,那麼後定義的規則優先.

總結

在實際開發過程當中,咱們可能只須要知道內聯樣式>id>class便可,若是特殊性相同,後定義的規則優先.

參考書籍: 《CSS: The Definitive Guide》