当项目中引入多个CSS文件时，经常会出现样式互相覆盖、布局不符合预期的问题，这本质上是CSS层叠规则和文件加载顺序共同作用的结果。理解CSS的生效逻辑，就能快速解决这类冲突问题。
CSS层叠体系的核心规则
CSS的全称是层叠样式表，层叠就是多个样式规则作用于同一个元素时，浏览器决定最终生效样式的机制，核心遵循三个判断维度，优先级从高到低依次是：
- 重要性：带
!important的样式优先级最高，会覆盖普通样式 - 特异性：也就是选择器的权重，权重越高的选择器生效优先级越高
- 源顺序：当重要性和特异性都相同时，后定义的样式会覆盖先定义的样式
选择器特异性权重计算
选择器的权重可以用四位数值表示，从左到右优先级依次降低：
| 选择器类型 | 权重值 | 示例 |
|---|---|---|
| 内联样式 | 1,0,0,0 | style="color:red" |
| ID选择器 | 0,1,0,0 | #header |
| 类、属性、伪类选择器 | 0,0,1,0 | .nav、[type="text"]、:hover |
| 元素、伪元素选择器 | 0,0,0,1 | div、::before |
计算时把对应选择器的权重值相加，比如.nav #logo的权重是0,1,1,0，比#header .logo的0,1,1,0权重相同，这时候就会看源顺序。
link加载顺序对样式的影响
通过link标签引入的CSS文件，浏览器会按照HTML中link标签的出现顺序依次加载和解析，后加载的文件中定义的样式，在源顺序上会晚于先加载的文件。
假设我们有两个CSS文件，a.css先加载，b.css后加载，两个文件都定义了同一个元素的宽度样式：
/* a.css 先加载 */
.container {
width: 1000px;
}
/* b.css 后加载 */
.container {
width: 1200px;
}
最终.container的宽度会是1200px，因为b.css的样式定义更靠后，在源顺序上优先级更高。
多个CSS文件冲突的排查步骤
遇到布局异常时，可以按照以下步骤排查：
- 打开浏览器开发者工具，选中异常布局的元素，查看右侧Styles面板中生效的样式
- 找到冲突的样式属性，查看该属性被哪些CSS文件定义，确认每个定义的来源和权重
- 对比不同定义的权重和源顺序，判断为什么预期样式没有生效
- 根据排查结果调整样式，比如提升选择器权重、调整link加载顺序，或者给需要优先的样式加
!important
解决冲突的常用方法
调整link加载顺序
把需要优先生效的CSS文件的link标签放在后面，比如基础样式文件放前面，组件样式文件放后面，页面独有样式文件放在最后面，这样后加载的样式可以覆盖前面的通用样式。
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="component.css">
<link rel="stylesheet" href="page-index.css">
</head>
提升选择器特异性
如果某个样式需要固定生效，可以提升选择器的权重，比如给元素加ID选择器，或者增加父级选择器层级，避免被其他通用样式覆盖。
/* 原样式权重低，容易被覆盖 */
.text {
color: #333;
}
/* 提升权重，更不容易被覆盖 */
#content .text {
color: #333;
}
合理使用!important
只有在必要场景下才使用!important，比如覆盖第三方库的强制样式，或者需要保证某个样式绝对生效的场景，避免滥用导致后续样式维护困难。
/* 覆盖第三方库的默认样式 */
.third-party-btn {
background-color: #ff4400 !important;
}
预防冲突的最佳实践
除了解决已有的冲突，平时开发时做好规范可以有效减少冲突出现的概率：
- 采用模块化命名，比如BEM命名规范，避免不同模块的样式类名重复
- 通用样式和页面独有样式分开管理，不要在一个文件里写所有样式
- 避免写过于通用的选择器，比如直接用元素选择器定义全局样式，很容易被后续样式覆盖
- 定期整理CSS文件，删除无用的样式定义，减少冲突的可能性