在网页开发中，我们经常会因为模块化开发、引入第三方组件库等需求，在一个页面中引入多个css样式文件。这些文件的引入顺序会直接影响最终页面的样式表现，掌握其控制方法能有效避免样式冲突问题。
css引入样式文件的常见方式
目前主流的css引入方式有三种，不同方式下文件顺序的控制逻辑略有差异：
- link标签引入：在html的<head>中通过<link>标签引入外部css文件，是项目中最常用的方式
- @import引入：在css文件内部通过@import规则引入其他css文件，属于css层面的引入方式
- 内联样式：直接在html元素的style属性中写样式，不属于文件引入范畴，优先级最高
link标签引入时的顺序控制
当使用<link>标签引入多个css文件时，浏览器会按照标签在html中出现的先后顺序依次加载并解析样式。后解析的样式文件中，和前面文件同优先级的选择器规则会覆盖前面的规则。
比如我们有两个样式文件，base.css定义全局基础样式，theme.css定义主题相关样式，我们希望主题样式可以覆盖基础样式中同优先级的规则，就可以把theme.css的<link>标签放在base.css之后：
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
</head>
如果base.css中有如下规则：
/* base.css */
.btn {
background-color: #f0f0f0;
color: #333;
}
theme.css中有如下规则：
/* theme.css */
.btn {
background-color: #1890ff;
color: #fff;
}
因为theme.css后加载，所以最终.btn的背景色会是蓝色，文字是白色，实现了主题样式覆盖基础样式的效果。
@import引入时的顺序控制
@import规则必须写在css文件的最顶部，也就是所有其他规则之前。它的加载顺序同样是按照书写的先后顺序依次解析，后引入的文件中的同优先级规则会覆盖前面的规则。
比如我们有一个main.css文件，需要引入reset.css和layout.css，希望layout.css的规则可以覆盖reset.css中同优先级的规则，就可以这样写：
/* main.css */
@import url("reset.css");
@import url("layout.css");
/* 其他自定义规则 */
.container {
max-width: 1200px;
}
需要注意的是，@import引入的样式会在当前css文件解析到对应规则时才加载，可能会比link标签引入的方式加载更慢，所以实际项目中更推荐使用link标签管理样式文件顺序。
结合优先级规则判断最终样式
引入顺序只会影响同优先级的样式规则覆盖情况，如果不同优先级，优先级高的规则无论引入顺序如何都会生效。css优先级的计算规则如下：
| 选择器类型 | 优先级权重 |
|---|---|
| 内联样式（style属性） | 1000 |
| id选择器（#id） | 100 |
| 类选择器（.class）、属性选择器、伪类选择器 | 10 |
| 元素选择器（div、p等）、伪元素选择器 | 1 |
| 通配符选择器（*）、继承的样式 | 0 |
比如前面例子中，如果base.css里的.btn规则是用id选择器定义的：
/* base.css */
#submit-btn {
background-color: #f0f0f0;
}
而theme.css里的.btn规则是类选择器：
/* theme.css */
.btn {
background-color: #1890ff;
}
即使theme.css后引入，因为id选择器优先级更高，最终背景色还是会是#f0f0f0，不会被子类选择器规则覆盖。
实际项目中的最佳实践
为了避免样式冲突，建议按照以下顺序引入样式文件：
- 第一步：引入第三方组件库的样式文件，比如Element UI、Ant Design的css文件，避免自定义样式被组件库样式意外覆盖
- 第二步：引入项目的基础样式文件，比如reset.css、normalize.css、全局变量定义的css文件
- 第三步：引入业务模块的样式文件，按照模块依赖关系从基础到上层依次引入
- 第四步：引入页面级别的自定义样式文件，处理当前页面的特殊样式需求
如果遇到必须让某个样式文件优先覆盖其他文件的情况，除了调整引入顺序，也可以通过提升选择器优先级的方式实现，比如给选择器增加父级类名、使用更具体的选择器，避免单纯依赖引入顺序导致维护困难。
常见问题解答
引入顺序错了怎么快速排查？
可以打开浏览器的开发者工具，选中对应元素，在样式面板中查看生效的样式来源，被划掉的样式就是被覆盖的规则，根据来源文件判断引入顺序是否符合预期。
动态加载的css文件顺序怎么控制？
动态加载css时，可以通过控制创建<link>标签的顺序来控制加载顺序，后创建的标签对应的样式会后解析，同优先级下会覆盖前面的规则。示例代码如下：
// 先加载base样式
const baseLink = document.createElement("link");
baseLink.rel = "stylesheet";
baseLink.href = "base.css";
document.head.appendChild(baseLink);
// 后加载主题样式
const themeLink = document.createElement("link");
themeLink.rel = "stylesheet";
themeLink.href = "theme.css";
document.head.appendChild(themeLink);