這篇是基于CSS選擇器的桐绒，如果對選擇器不太了解可以先看另一篇CSS選擇器
（一）什么是CSS權(quán)重？
- 權(quán)重決定了你CSS規(guī)則怎樣被瀏覽器解析直到生效覆致，即你的CSS規(guī)則是怎樣顯示的
（二）權(quán)重之比
權(quán)重順序 ：!important > 內(nèi)聯(lián) > ID > 類 = 偽類 = 屬性 > 標簽(元素) = 偽元素 > 通配符
（三）怎么確定權(quán)重?
權(quán)重記憶口訣
從0開始：
一個
行內(nèi)樣式+ 1000衙吩；一個
ID+ 100所森；一個
屬性/類/偽類+ 10尖坤；一個
元素/偽元素+ 1NOTE：行內(nèi)樣式稳懒，指的是html文檔中定義的style
NOTE：包含選擇器的權(quán)重為：包含的選擇器權(quán)重值之和
舉例：
body #content .data img:hover
#content —— id選擇器加了 100
.data —— class類選擇器加了 10
:hover —— 偽類選擇器加了 10
body 、img —— 元素加了 1
最終的權(quán)重值是 0122
按權(quán)重值排列
權(quán)重值| 選擇器
----|----|----
0000|通用選擇符 / 子選擇符/繼承的樣式
0001|元素選擇器
0010|屬性選擇器 / 類選擇器 /偽類
0100|ID選擇器
1000|行內(nèi)樣式
按選擇器排列
| 選擇器 | 表達式或示例 | 權(quán)重值 |
|---|---|---|
| ID選擇器 | #aaa | 100 |
| 類選擇器 | .aaa | 10 |
| 標簽選擇器 | h1 | 1 |
| 屬性選擇器 | [title] | 10 |
| 相鄰選擇器 | selecter + selecter | 拆分為兩個選擇器再計算 |
| 兄長選擇器 | selecter ~ selecter | 拆分為兩個選擇器再計算 |
| 親子選擇器 | selecter > selecter | 拆分為兩個選擇器再計算 |
| 后代選擇器 | selecter selecter | 拆分為兩個選擇器再計算 |
| 通配符選擇器 | * | 0 |
| 各種偽類選擇器 | 如:link糖驴， :visited僚祷， :hover佛致， :active贮缕， :target， :root俺榆， :not... |
10 |
| 各種偽元素 | 如::first-letter,::first-line,::after,::before,::selection
|
1 |
（四）權(quán)重的基本規(guī)則
1感昼、相同的權(quán)重：最后面出現(xiàn)的選擇器為最后規(guī)則
假如在外部樣式表中，同一個CSS規(guī)則你寫了兩次罐脊，那么出現(xiàn)在前面的選擇器權(quán)重低定嗓，你的樣式會選擇后面的樣式2、不同的權(quán)重萍桌，權(quán)重值高則生效
選擇器可能會包含一個或者多個與權(quán)重相關(guān)的計算點宵溅，若經(jīng)過計算得到的權(quán)重值越大，則認為這個選擇器的權(quán)重高我們可以利用 ID 來增加選擇器權(quán)重
（五）對權(quán)重規(guī)則的總結(jié)
- 一條樣式規(guī)則的整體權(quán)重值包含四個獨立的部分：[A, B, C, D]
- A 表示內(nèi)聯(lián)樣式上炎，只有 1 或者 0 兩個值
- B 表示規(guī)則中
ID的數(shù)量 - C 表示規(guī)則中除了 ID恃逻、標簽和偽元素以外的其它選擇器數(shù)量
- D 表示規(guī)則中
標簽和偽元素的數(shù)量
比較時從高位到低位（從 A 到 D）分別比較，高位相同才需要比較低位
!important注意點：- 如果多條規(guī)則中都對同一個屬性指定了
!important，這時候!important的作用相互抵銷寇损，依然按照ABCD四組計算比較 -
!important的作用只有在具有唯一性時才能提現(xiàn)凸郑，但是我們永遠無法預(yù)料自己什么時候又需要覆蓋一個已經(jīng)指定了!important的屬性，所以最好的辦法就是不要使用
（六）CSS 優(yōu)先級法則
- A )選擇器都有一個權(quán)值矛市，權(quán)值越大越優(yōu)先
- B )當權(quán)值相等時芙沥，后出現(xiàn)的樣式表要優(yōu)于先出現(xiàn)的樣式表設(shè)置
- C )繼承(
inherit)的CSS 樣式優(yōu)先級低于指定的CSS 樣式 - D )在同一組屬性設(shè)置中標有“!important”規(guī)則的優(yōu)先級最大
