CSS 优先级计算

CSS 的优先级是根据样式声明的特殊值来判断的。

选择器的特殊值分为四个等级，如下：

1. 内联样式 1,0,0,0
2. ID 选择器 0,1,0,0
3. 类选择器/属性选择器/伪类选择器 0,0,1,0
4. 元素和伪元素选择器 0,0,0,1

或者更加直观一点概括为 6 个，包括以下两个：

5. !important 1,0,0,0,0
6. 通配符选择器 0,0,0,0

计算方法：

• 每个等级的初始值为 0
• 每个等级的叠加为选择器出现的次数相加
• 不可进位，比如 0,99,99,99
• 依次表示为：0,0,0,0
• 每个等级计数之间没有关联
• 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
• 如果两个优先级相同，则最后出现的优先级高，!important 也适用。
• 通配符选择器的特殊值为：0,0,0,0
• 继承样式优先级最低，通配符样式优先级高于继承样式。
• !important（权重），它没有特殊值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊值为 1,0,0,0,0

注意：

1. 样式应用时，CSS 会先查看规则的权重（!important），加了权重的优先级最高，当权重相同时，会比较规则的特殊性。
2. 特殊性值越大的声明优先级越高。
3. 相同特殊值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
4. 部分浏览器由于字节溢出问题出现的进位表现不做考虑。