Css權重解析

標籤：style   層疊   權重   演算法   body   虛擬元素   而不是   不可   css   

Css權重解析

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先順序的一個標準 具體規範入如下：

specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個層級，值從左至右，左面的最大，一級大於一級，數位之間沒有進位，層級之間不可超越。

繼承或者* 的貢獻值	0,0,0,0
每個元素（標籤）貢獻值為	0,0,0,1
每個類，偽類貢獻值為	0,0,1,0
每個ID貢獻值為	0,1,0,0
每個行內樣式貢獻值	1,0,0,0
每個!important貢獻值 重要的	∞ 無窮大

權重是可以疊加的

比如的例子：

div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1

?

?

注意：

1.數位之間沒有進位 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類別選取器的情況。

1. 繼承的 權重是 0

總結優先順序：

1. 使用了 !important聲明的規則。
2. 內嵌在 HTML 元素的 style屬性裡面的聲明。
3. 使用了 識別碼選取器的規則。
4. 使用了類別選取器、屬性選取器、虛擬元素和偽類別選取器的規則。
5. 使用了元素選取器的規則。
6. 只包含一個通用選取器的規則。
7. 同一類別選取器則遵循就近原則。

總結：權重是優先順序的演算法，層疊是優先順序的表現

Css權重解析