CSS选择器优先级

CSS选择器优先级规则，也就是当多个样式同时作用于同一个元素时，浏览器到底会选择哪一个样式生效。

一、优先级公式

优先级从高到低排序：

1. !important（最高权重，强制覆盖）
2. 行内样式（style="..."）
3. ID选择器（#id）
4. 类选择器 / 属性选择器 / 伪类（.class / [type] / :hover）
5. 元素选择器 / 伪元素（div / p / ::before）
6. 通配符（*）、关系选择器（+ > ~ 空格）（权重0）

二、权重计算规则（简单版）

不用记复杂数字，用四位数等级判断：

( 行内, ID, 类/属性/伪类, 元素/伪元素 )

数字越大，优先级越高。

举例

div                 → (0,0,0,1)
.box                → (0,0,1,0)
#header             → (0,1,0,0)
div.box             → (0,0,1,1)
#nav .menu a        → (0,1,1,1)
style=""            → (1,0,0,0)
color:red!important → 无敌

三、优先级判断口诀

1. 有 !important 直接赢（不推荐滥用）
2. 行内样式 > ID > 类 > 元素
3. 权重相同，后写的覆盖先写的（就近原则）
4. 继承样式权重最低，比所有直接选中的都弱

四、实战示例

<style>
  #box { color: blue; }       /* ID：(0,1,0,0) */
  .box { color: green; }       /* 类：(0,0,1,0) */
  div { color: red; }         /* 元素：(0,0,0,1) */
</style>

<div id="box" class="box">文字颜色？</div>

✅ 结果：蓝色（ID优先级最高）

五、特别注意

1. !important 优先级最高，但尽量少用，会破坏样式结构
2. 权重不会进位：100个类选择器 ＜ 1个ID选择器
3. 继承样式权重为0，哪怕父级是ID，子元素直接选中也能覆盖

六、一句话总结

!important > 行内 > ID > 类/属性/伪类 > 元素 > 通配符/关系符

总结

1. 优先级从高到低：!important → 行内样式 → ID → 类/属性/伪类 → 元素 → 通配符
2. 权重用四元组 (行内,ID,类,元素) 计算
3. 权重相同后面写的覆盖前面写的
4. 继承样式权重最低