CSS引入顺序影响样式生效是因为后加载的同权重规则会覆盖先加载的，但选择器权重优先于顺序；权重相同时才按HTML中link/style从上到下的顺序层叠。
为什么 CSS 引入顺序会影响样式生效？
引入顺序直接决定 !important 以外的普通规则的层叠顺序。浏览器按 HTML 中 或 出现的**从上到下顺序**读取样式表，后加载的样式会覆盖前面同优先级、同选择器权重的声明。
- 外部样式表（
）按标签在 HTML 中的书写顺序加载 - 内联样式（
属性）优先级高于所有外部/内部样式，但不改变引入顺序逻辑 - 动态插入的
或通过 JS 创建的也参与层叠，以插入时刻为序
选择器权重比引入顺序更关键
即使后引入的 CSS 文件里写的是 .btn { color: red; }，如果先引入的文件里有 div .btn:hover { color: blue; }，后者仍会生效——因为它的选择器权重更高（包含元素 + 类 + 伪类）。
常见被覆盖的典型场景
不是引入顺序不对，而是没意识到某些规则天然“更强”：
-
body * { font-size: 14px; }这种通配+祖先组合，权重低但作用范围极大，容易被后续局部规则意外覆盖 - 框架 CSS（如 Bootstrap）通常在头部引入，但若你自己的 CSS 在它之后，且选择器不够具体，就会被框架默认样式压住
- Vue/React 组件 scoped 样式生成的属性选择器（如
[data-v-abc123] { color: red; }）权重等同于类选择器，但可能因构建后插入时机靠后而“赢过”全局样式 - 使用
@import的 CSS 文件，其内部规则权重不变，但@import本身必须出现在样式表最前，否则会被忽略；且它阻塞渲染，不推荐在后混用
如何快速定位谁覆盖了你的样式？
打开 Chrome DevTools → Elements 面板 → 选中目标元素 → 右侧 Styles 面板里找被划掉的属性。鼠标悬停在该行，会显示「This rule was overridden by …」提示，并标出来源文件和行号。
立即学习“前端免费学习笔记（深入）”；
- 点击右侧文件名链接，能跳转到对应 CSS 源码位置
- 临时禁用某条规则（点左侧复选框），观察样式是否恢复，可验证覆盖源
- 检查是否启用了浏览器插件（如 Dark Reader、Stylus），它们注入的样式也在层叠中参与竞争
.my-card {
background: #f0f0f0;
}
/* 如果下面这条在另一个文件里且后加载，它不会覆盖上面那条 */
.my-card {
background: #fff;
}
/* 但下面这条会——因为权重更高（多了一个类） */
.card-container .my-card {
background: #e0e0e0;
}真正容易被忽略的，是构建工具（如 Webpack、Vite）对 CSS 的处理顺序：CSS in JS、CSS Modules、postcss 插件、提取 CSS 的时机，都可能让“你以为的引入顺序”和实际注入 DOM 的顺序不一致。调试时得看最终 HTML 里的 和 排列，而不是源码 import 顺序。
