[TOC] # 簡介 瀏覽器通過優先級來判斷哪一些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。優先級是基于不同種類選擇器組成的匹配規則。 <br> <br> # 按顯式權重對應用到給定元素的所有聲明排序 計算的過程指的是用戶代理（瀏覽器只是用戶代理的一種“實例”）在渲染HTML的時候，對CSS進行層疊計算的過程。 層疊按照以下標準對聲明進行排序，按優先級降序排列： 1. Transition聲明 2. 用戶瀏覽器的 important 聲明 3. 用戶的important聲明 4. 作者的important聲明 5. Animation聲明 6. 作者的普通聲明 7. 用戶的普通聲明 8. 用戶代理的普通聲明 <br> 假設我們的用戶代理是Chrome瀏覽器，那么當我們要計算A:<div class="taobao"></div>的padding值的時候，會有這么一個排序過程（簡化）： > > 1. 瀏覽器中對該標簽的``padding``默認值 > 2. 開發者對該標簽的 ``padding`` 進行聲明的值 > 3. 瀏覽器中對該標簽的 ``padding`` 進行 **!important** 聲明的值 > 4. 開發者對該標簽的 ``padding`` 進行 **!important** 聲明的值 <br> ~~~ <div class="taobao_com" id="taobao_com" data-show="true"> <div class="taobao"></div> <p>taobao.com</p> </div> div{ padding:1px; } .taobao_com{ padding:12px; } div .taobao{ padding:123px; } .taobao_com .taobao{ padding:1234px; } ~~~ 上面分別寫了4條padding的的聲明，但都會被排在層疊順序的開發者對該標簽的 padding 進行聲明的值之中，而且padding沒有更高權重的聲明了，那么就會對這個聲明隊列里的聲明進行優先級的計算。 <br> # 按特殊性對應用到給定元素的所有聲明排序 優先級就是分配給指定的CSS聲明的一個權重，它由匹配的選擇器中的每一種選擇器類型的數值決定。 <br> 而當優先級與多個CSS聲明中任意一個聲明的優先級相等的時候，CSS中最后的那個聲明將會被應用到元素上。 <br> 當同一個元素有多個聲明的時候，優先級才會有意義。因為每一個直接作用于元素的CSS規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。 > 注意: 文檔樹中元素的接近度?對優先級沒有影響。 <br> ## 計算 選擇器的特異性是針對給定元素計算的，如下所示： 1. **類型選擇器**（例如, h1）和**偽元素** （例如, ::before）**（= A）** 2. **類選擇器**(例如,`.example`)，**屬性選擇器**（例如,?`[type="radio"]`），**偽類**（例如, :hover）**（= B）** 3. **ID選擇器**（例如, #example）**（= C）** 4. **內聯樣式**比所有其他聲明的級別都高 **通配選擇符**（universal selector）(`*`),**關系選擇符**（combinators） (`+`,?`>`,?`~`, '') ?和**否定偽類**（negation pseudo-class）(`:not()`)對優先級沒有影響。（但是，在 **:not() 內部聲明** 的選擇器是會影響優先級）。 <br> <br> 把權重分為 A,B,C 三個級別，A > B > C , A,B,C 直接各自計算。優先計算 A 的權重，如果相等會計算 B 的權重，以此類推。 例子 ~~~ * /* a=0 b=0 c=0 */ LI /* a=0 b=0 c=1 */ UL LI /* a=0 b=0 c=2 */ UL OL+LI /* a=0 b=0 c=3 */ H1 + *[REL=up] /* a=0 b=1 c=1 */ UL OL LI.red /* a=0 b=1 c=3 */ LI.red.level /* a=0 b=2 c=1 */ #x34y /* a=1 b=0 c=0 */ #s12:not(FOO) /* a=1 b=0 c=1 */ .foo :is(.bar, #baz) /* a=1 b=1 c=0 */ ~~~ <br> <br> ## :not 偽類 `:not`否定偽類在優先級計算中不會被看作是偽類. 事實上, 在計算選擇器數量時還是會把其中的選擇器當做普通選擇器進行計數. ## 例子 ~~~ <div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <div id="haha"> <p> ssss</p></div> <p>This text is in the inner div.</p> </div> </div> ~~~ <br> 不聲明:not ~~~ div.outer p { color:orange; } div:not(.outer) p { color: blueviolet; } div #haha p { color: blue; } ~~~  <br> :not 在普通樣式之后 ~~~ div.outer p { color:orange; } div:not(.outer) p { color: blueviolet; } div #haha p { color: blue; } div:not(#hehe) p{ color: red; } ~~~  <br> :not 在普通樣式之前 ~~~ div.outer p { color:orange; } div:not(.outer) p { color: blueviolet; } div:not(#hehe) p{ color: red; } div #haha p { color: blue; } ~~~  可以看出，`div:not(#hehe) p` 與 `div #haha p` 同級，受聲明順序影響。 <br> <br> # 按出現順序對應用到給定元素的所有聲明排序 一個聲明在樣式表或文檔中越后出現，它的權重就越大。如果樣式表中有導入樣式表的話，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在后。 <br> 若兩個規則的權重，來源和特殊性完全相同，那么在樣式表中后出現的一個會勝出。特別地，認為元素style屬性中指定的樣式位于文檔樣式表的最后，即放在所有其他規則的后面。不過，這一點已經沒有意義了，因為CSS2.1明確指明內聯樣式的特殊性要高于所有樣式表選擇器。 <br> ## 加入CSS的方法 內聯樣式：`<div style="color:red;">` 內部樣式表：`<style type="text/css">p{color:red;)</style>` 外部樣式表：`<link href="sty.css" rel="stylesheet" type="text/css" />` 導入式樣式表：`<style type="text/css">@import url("sty2.css");</style> ` <br> 關于內部樣式表（即style元素`<style></style>`）與外部樣式表以及引入式樣式表，這三者的來源均屬于創作人員，所以在聲明的特殊性相同的情況下，會按它們出現的順序決定誰最終勝出。誰出現在文檔中的位置靠后，誰優先級高。而因為CSS2.1明確指明內聯樣式的特殊性要高于所有樣式表選擇器，所以最終比較的是內部樣式表、外部樣式表、導入式樣式表的位置。 <br> <br> # 參考資料 [MDN - 優先級 ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)[真正理解"CSS選擇器的優先級"](https://github.com/jincdream/jincdream.github.io/issues/14) [CSS Cascading and Inheritance Level 4](https://www.w3.org/TR/css-cascade-4/#cascading) CSS權威指南（第三版）