CSS引入顺序决定同权重样式的覆盖结果：后引入的规则必然覆盖先引入的，包括link标签、@import嵌套、JS动态插入等场景，顺序错误会导致样式失效或难以调试。
CSS 文件引入顺序错误会直接改变样式优先级
浏览器按 HTML 中 <link> 标签的出现顺序依次加载和解析 CSS，后引入的样式规则在发生冲突时会覆盖先引入的——这不是“可能”，而是确定行为。只要选择器权重相同，顺序就决定胜负。
同权重下后引入的 CSS 规则必然覆盖前面的
比如两个文件都定义了 button { color: red; }，但 theme.css 在前、override.css 在后：
<link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="override.css">
那么 override.css 里的 button { color: blue; } 一定会生效。反过来写就会失效。
- 常见误操作：把重置样式（如
reset.css）放在业务样式后面，导致重置被业务样式覆盖，失去作用 - Vue / React 单文件组件中
<style>默认插入到<head>末尾，若同时有外部<link>，顺序更难控制 - Webpack 等构建工具若未配置
mini-css-extract-plugin的 chunk 加载顺序，也可能打乱预期
import 语句嵌套顺序同样影响层叠
即使外部文件引入顺序正确，内部 @import 仍会破坏层级。例如：
立即学习“前端免费学习笔记（深入）”；
/* main.css */ @import 'base.css'; @import 'components.css';
如果 components.css 里又写了 @import 'utils.css'，那 utils.css 实际会排在 components.css 内容之后解析，可能意外覆盖 base.css 中同权重规则。
-
@import必须写在文件最顶部，否则会被忽略 - 现代项目应避免
@import，改用构建工具做依赖管理，防止隐式顺序混乱 - 使用
postcss-import可提前展开@import，但需确认其解析顺序与最终打包结果一致
动态插入的 style 标签或 JS 注入 CSS 更容易失控
通过 JS 执行 document.head.appendChild(linkEl) 或 document.styleSheets[i].insertRule() 插入样式时，插入位置由执行时机决定。比如：
- React 组件挂载时注入的
<style>标签，总在所有外部<link>之后，天然高优先级 - 但若多个组件分别注入同名选择器，谁先挂载谁先写入，谁后挂载谁覆盖——这和组件渲染顺序强相关，极难调试
- Chrome DevTools 的
Computed面板里能看到每条样式来自哪个sheet和行号，但不会显示“它为什么赢了”，得手动比对引入顺序
真正麻烦的不是“覆盖”，而是覆盖得不透明：你改了 A.css 没生效，其实是因为 B.css 在它后面，而 B.css 是某个第三方库自动注入的。
