真正理解 CSS選擇器的優先順序

當我們在討論css選擇器優先順序的時候，我們再討論什麼？

其實很多人都對此有點模糊，那我換個方式問：乙個css屬性的最終值是怎麼來？

回答 : css屬性的最終值是通過層疊計算得來的。

那什麼是層疊計算呢？

我通俗的理解，其實就是先計算再重疊。

層疊是css的乙個基本特徵，它是乙個定義了如何合併來自多個源的屬性值的演算法。它在css處於核心地位，css的全稱層疊樣式表正是強調了這一點。

計算的過程指的是使用者**（瀏覽器只是使用者**的一種「例項」）在渲染html的時候，對css進行層疊計算的過程（這裡不討論瀏覽器的渲染、重繪等觸發時機）。

為了方便理解，這裡只針對乙個屬性值（padding）進行討論，其他的屬性值都是一樣的過程。

demo:

class="taobao_com"
id="taobao_com"
data-show="true">
class="taobao">
div>
taobao.comp>
div>
複製**

div .taobao_com div.taobao .taobao_com .taobao

複製**

在屬性的計算之前，會對每個文件元素的每個屬性上的值進行排序（w3c文件位址）：

1. transition declarations [css3-transitions] 2. important user agent declarations 3. important user declarations 4. important override declarations [dom-level-2-style] 5. important author declarations 6. animation declarations [css3-animations] 7. normal override declarations [dom-level-2-style] 8. normal author declarations 9. normal user declarations 10.normal user agent declarations

複製**

排序靠前的會比靠後的優先順序要高。 1 > 2 > 3 > 4 > 5 ...

假設我們的使用者**是chrome瀏覽器，那麼當我們要計算a:

的padding值的時候，會有這麼乙個排序過程（簡化）：

1. 瀏覽器中對該標籤的``padding``預設值 2. 開發者對該標籤的 ``padding`` 進行宣告的值 3. 瀏覽器中對該標籤的 ``padding`` 進行 **!important** 宣告的值 4. 開發者對該標籤的 ``padding`` 進行 **!important** 宣告的值

複製**

那麼在demo裡面，分別寫了4條padding的的宣告，但都會被排在層疊順序的開發者對該標籤的padding進行宣告的值之中，而且padding沒有更高權重的宣告了，那麼就會對這個宣告佇列裡的宣告進行優先順序的計算。

優先順序的計算首先是選擇器權重的優先順序計算，然後是宣告先後順序的優先順序計算。

選擇器優先順序的權重計算

這時候，才到了選擇器優先順序登場。

選擇器的權重並不是網上很多人說的

選擇器通過權重值 1(div等)、10(class)、100(id)

這樣的方式進行的，這只是別人理解出來的東西，真正的計算原理可以翻閱w3c文件選擇器權重的計算。

文件指出：

a selector』s specificity is calculated for a given element as follows:

1.count the number of id selectors in the selector (= a) 2.count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) 3.count the number of type selectors and pseudo-elements in the selector (= c) 4.ignore the universal selector

文件也給了例子：

examples:
*               /* 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 :matches(.bar, #baz)
/* either a=1 b=1 c=0
or a=0 b=2 c=0, depending
on the element being matched. */
複製**

大致意思就是，把權重分為了 a,b,c 三個級別，a > b > c , a,b,c 直接各自計算。也就是會優先計算 a 的權重，如果相等會計算 b 的權重，以此類推。

所以才有了100、10、1的說法，但很不準確。

結合之前的demo，我們來計算下權重值:

div

複製**

.taobao_com

複製**

div .taobao

複製**

.taobao_com .taobao

複製**

由於a位相等，b位差異的最大值在 4 ，得到的結果將會是第4條宣告勝出: 1. a = 0 ,b = 0, c = 1 2. a = 0 ,b = 1, c = 0 3. a = 0 ,b = 1, c = 1 4. a = 0 ,b = 2, c = 0

當 a 、b 、c 所計算的權重都相等時（abc三個值相等）相等時，後面宣告的值將會是最終的計算值。

最終得到了css屬性的值。

文章優先發布在github

真正理解 CSS選擇器的優先順序

選擇器優先順序 CSS選擇器優先順序總結

CSS 選擇器優先順序

css選擇器優先順序

真正理解 CSS選擇器的優先順序

選擇器優先順序 CSS選擇器優先順序總結

CSS 選擇器優先順序

css選擇器優先順序

相關推薦