CSS层叠是样式渲染的核心机制，当多个样式规则作用于同一个元素时，浏览器会按照特定规则决定最终生效的样式。理解层叠规则能帮我们快速解决样式冲突问题，减少无效的调试工作。
CSS层叠的核心规则
CSS层叠的判断顺序依次是：重要性 > 来源优先级 > 选择器权重 > 书写顺序，满足前一个条件时就不会继续往后判断。
1. 重要性规则
带有!important声明的样式优先级最高，会覆盖同属性的其他普通声明。但需要注意，!important不能滥用，否则会让样式维护难度大幅提升。
/* 普通样式 */
.box {
color: red;
}
/* 带!important的样式，优先级更高 */
.box {
color: blue !important;
}
2. 样式来源优先级
不同来源的样式优先级从高到低为：
- 用户添加的
!important样式 - 开发者编写的
!important样式 - 开发者编写的普通样式
- 浏览器默认样式
3. 选择器权重计算
选择器权重用四元组(a,b,c,d)表示，数值越大权重越高，具体计算规则如下：
| 选择器类型 | 权重贡献 | 示例 |
|---|---|---|
| 内联样式 | (1,0,0,0) | <div style="color:red"></div> |
| ID选择器 | (0,1,0,0) | #header |
| 类、属性、伪类选择器 | (0,0,1,0) | .box、[type="text"]、:hover |
| 元素、伪元素选择器 | (0,0,0,1) | div、::before |
| 通配符、继承样式 | (0,0,0,0) | *、继承得到的样式 |
权重比较时从左到右依次对比，只要某一位数值更大，整体权重就更高，不会出现进位的情况。比如(0,1,0,0)的权重高于(0,0,10,0)。
/* 权重 (0,0,1,0) */
.box {
color: red;
}
/* 权重 (0,0,1,1)，高于上面的规则 */
div.box {
color: blue;
}
/* 权重 (0,1,0,0)，高于上面的两个规则 */
#container .box {
color: green;
}
4. 书写顺序规则
当多个样式权重完全相同时，后面书写的样式会覆盖前面的样式。
.box {
color: red;
color: blue; /* 最终生效蓝色 */
}
常见层叠问题处理方案
问题1：样式不生效被覆盖
先检查是否有更高权重的规则或者!important声明，再确认选择器是否准确匹配到了目标元素。可以通过浏览器开发者工具的Computed面板查看样式被覆盖的原因。
问题2：需要覆盖第三方组件样式
优先通过提高自己选择器的权重来覆盖，比如给组件外层加一个自定义ID，再拼接组件内部的选择器。如果必须用到!important，尽量只在局部场景使用，避免全局污染。
/* 自定义外层ID提高权重 */
#my-app .third-party-btn {
background-color: #409eff;
}
问题3：继承样式不符合预期
不是所有CSS属性都会继承，比如margin、padding、border等不会继承。如果需要继承的属性没有生效，检查是否被更具体的选择器重新定义了样式。
层叠问题调试技巧
遇到样式冲突时，打开浏览器开发者工具，选中目标元素，在Styles面板中可以看到所有作用于该元素的样式，被划掉的样式就是被层叠规则覆盖的部分，点击对应的样式文件可以快速定位代码位置。修改样式时可以实时预览效果，确认调整方案可行后再同步到代码文件中。