CSS文件引入顺序决定样式覆盖结果，浏览器按<link>标签出现顺序加载解析，后加载的同选择器声明覆盖先加载的；应遵循从通用到具体、基础到覆盖的分层原则，禁用@import，特异性与顺序共同影响最终生效样式。
多个 CSS 文件引入顺序直接影响样式生效结果
浏览器按 <link> 标签在 HTML 中的**出现顺序**依次加载、解析并应用样式，后加载的 CSS 中相同选择器的声明会覆盖先加载的——这是层叠（cascade）的基本规则。顺序错了，!important 都救不回来。
哪些 CSS 文件该放前面、哪些必须放后面
通用原则是：**从通用到具体，从基础到覆盖**。常见分层如下：
-
reset.css或normalize.css：清空或统一默认样式，必须最前 - 第三方 UI 库（如
bootstrap.css、element-plus.css）：提供基础组件样式，放 reset 之后、项目样式之前 - 项目全局样式（如
base.css、variables.css）：定义颜色变量、字体、常用工具类，紧随库之后 - 页面/组件专属样式（如
home.css、modal.css）：含高特异性选择器或业务逻辑样式，必须放在最后
用 @import 引入 CSS 会破坏加载顺序控制
@import 在 CSS 文件内使用时，会**阻塞后续样式的解析**，且其实际加载时机晚于同级 <link>，极易导致意料外的覆盖失效。例如：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css">
若 theme.css 内部写了 @import "overrides.css";，则 overrides.css 实际生效时间可能晚于后续动态插入的样式，甚至被浏览器视为“异步加载”，无法保证层叠优先级。
立即学习“前端免费学习笔记（深入）”；
建议：全部用 <link> 显式声明，禁用 @import（尤其在生产环境）。
当多个文件含相同选择器时，仅靠顺序不够，还得看特异性
顺序只是前提，真正决定谁赢的是选择器特异性（specificity）。比如：
/* a.css */
.btn { color: blue; } /* 特异性: 0,0,1,0 */
<p>/<em> b.css（后引入） </em>/
button.btn { color: red; } /<em> 特异性: 0,0,2,0 → 覆盖成功 </em>/
但如果：
/* b.css（后引入） */
.btn { color: red; } /* 特异性相同 → 仍靠顺序覆盖 */
容易踩的坑：
- 用大量
!important掩盖顺序/特异性问题，最终导致维护困难 - 组件库 CSS 被项目样式意外覆盖（比如没加命名空间或 scoped）
- 构建工具（如 Webpack）自动提取 CSS 时打乱原始
<link>顺序，需检查插件配置（如mini-css-extract-plugin的insert选项）
复杂点在于：现代框架（Vue/React）的 scoped 样式、CSS-in-JS、CSS Modules 会让“文件顺序”这个概念变得模糊——此时真正起作用的是运行时注入顺序和局部作用域隔离机制，而不是 HTML 里的 <link> 排列。
