CSS引擎內部其實有一套自身的權值計算方式，為了日后方便使用讓我們來了解一下CSS是如何計算權值的吧！
首先CSS里的基礎選擇器大致有以下幾種：
- ID 選擇器， 如 #id{}
- 類選擇器， 如 .class{}
- 屬性選擇器， 如 a[href="jirengu.com"]{}
- 偽類選擇器， 如 :hover{}
- 偽元素選擇器， 如 ::before{}
- 標簽選擇器， 如 span{}
- 通配選擇器， 如 *{}
選擇器的權值
| 選擇器 | 權值 |
|---|---|
| 內聯Style | 1000 |
| ID選擇器 | 100 |
| 類選擇器 | 10 |
| 偽類選擇器 | 10 |
| 屬性選擇器 | 10 |
| 標簽選擇器 | 1 |
| 偽元素選擇器 | 1 |
優先級關系：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器
計算的規則
當一個有多個選擇器組合在一個元素上時應當遵循如下規則：
- 計算ID選擇器個數總和(X)，類選擇器 +屬性選擇器 + 偽類選擇器個數總和(Y)，標簽選擇器 + 偽元素選擇器個數總和(Z)。
- 按照順序比較對應X Y Z的個數，多的則優先級更高，相同則比較下一個參數，如若都相同則按照就近原則。
-
!important具有最高優先級。這個屬性會打破引入的規則使代碼變得難以維護，不到逼不得已不建議采用。
錯誤的權值相加理解
當一個元素同時被11個類選擇器和1個ID選擇器所指定時是否按照計算110>100而采用類選擇器的屬性呢，其實并不然在CSS權重計算中不存在進位這種現象即使個數再多也嚴格按照上面所說的優先級關系進行！
