CSS優先級的兩種理解方式是什么

這篇文章將為大家詳細講解有關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 位如下：

結果為：65793

例2：

.menu.menu .item{}
 

得到的權重值 bit 位如下：

結果為：513

例3：

.item.item.item{}
 

得到的權重值 bit 位如下：

結果為：3

關于“CSS優先級的兩種理解方式是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。