CSS優先級的兩種理解方式

方式一：值相加

咱們先去MDN看看官方的解釋：

優先級是如何計算的？
優先級就是分配給指定的 CSS 聲明的一個權重，它由 匹配的選擇器中的 每一種選擇器類型的 數值 決定。

而當優先級與多個 CSS 聲明中任意一個聲明的優先級相等的時候，CSS 中最後的那個聲明將會被應用到元素上。

當同一個元素有多個聲明的時候，優先級纔會有意義。由於每個直接做用於元素的 CSS 規則老是會接管/覆蓋（take
over）該元素從祖先元素繼承而來的規則。

咱們從上面一段描述中獲得個很重要的信息：權重

咱們再來看選擇器優先級關係：ID選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 標籤選擇器 = 僞元素選擇器。

看來真相已經呼之欲出了。

咱們只要給不一樣類型的選擇器設定一個權重值，而後在根據選擇器的數量進行相加，就很容易得出優先級，例如：
ID選擇器的權重值設爲 1000
類選擇器 、屬性選擇器 、僞類選擇器的權重值設爲 100
標籤選擇器、僞元素選擇器的權重值設爲 10
咱們能夠很快速的計算出下面這段CSS的權重值並做出正確的判斷。

//權重值1110
#app .menu .item{}
//權重值210
.menu.menu .item{}
//權重值30
.item.item.item{}

但是。。。細心的你可能會發現只要低優先級的選擇器數量足夠多（例如: .item...x200 {}），那麼低優先級的權重值就能夠超太高優先級的權重值，但實際效果其實仍是以高優先級樣式爲準。當出現這種狀況時可能用如今的權重值計算方式就沒法解釋了！

固然能夠經過限制選擇器的最大數量及拉大選擇器的權重值數值仍是能夠解釋的，但我總以爲這不是一種好的實現方式。

方式二：bit位存儲

咱們假設權重值是用unsigned int變量存儲，那麼該變量的bit位一共有32位（4字節），咱們從高位按字節展開以下：
字節1：00000000
字節2：00000000
字節3：00000000
字節4：00000000

按字節和選擇器對應：

字節1：00000000
字節2：00000000 ;ID選擇器
字節3：00000000 ;類選擇器 、屬性選擇器 、僞類選擇器
字節4：00000000 ;標籤選擇器、僞元素選擇器

相同類型選擇器直接進行個數相加，並填入到指定字節內。

例1：

#app .menu .item{}

獲得的權重值bit位以下：

00000000 00000001 00000001 00000001

結果爲：65793

例2：

.menu.menu .item{}

獲得的權重值bit位以下：

00000000 00000000 00000010 00000001

結果爲：513

例3：

.item.item.item{}

獲得的權重值bit位以下：

00000000 00000000 00000000 00000011

結果爲：3

上面示例中位存儲容量只有8位，因此選擇器的最大限制爲255，固然咱們能夠提升bit位來提升選擇器的最大值。

總結

這裏介紹了2種CSS優先級理解方式，你以爲那種更適合你呢？