link标签顺序直接决定样式是否生效，浏览器按中从上到下顺序加载css，后加载的同权重规则覆盖前者；框架css应置顶，自定义样式须置于其后，动态插入易导致意外覆盖。
link 标签顺序直接影响样式是否生效
浏览器按 <link> 在 中从上到下的顺序加载 CSS，后加载的同优先级规则会覆盖前面的。这不是“偶尔失效”，而是确定性行为——比如你把 app.css 放在 bootstrap.css 前面，所有 .btn 自定义样式都会被 Bootstrap 的默认规则盖掉。
- 检查当前 HTML 中所有
<link rel="stylesheet">的顺序，确认框架/重置类 CSS（如reset.css、tailwind.css）在最上方 - 业务样式（
components.css、page-home.css）必须放在框架之后，但又不能太靠后——如果后面还有主题切换用的dark-theme.css，它就得排在业务样式之后 - 避免用 JS 动态创建
<link>插入到末尾，这种写法天然晚于静态标签，容易导致意料外覆盖
如何快速验证是不是顺序问题
不用猜，直接用开发者工具定位：选中目标元素 → 右侧 Styles 面板里找被划掉（strikethrough）的样式声明 → 点击来源文件名，看它来自哪个 <link>；如果发现你写的规则被划掉了，而来源是排在你文件后面的 CSS，基本就是顺序错了。
- 临时删掉其他
<link>，只留你的 CSS 文件，刷新看样式是否出现 - 在 Network 面板确认所有 CSS 文件状态码都是
200，排除路径错误干扰判断 - 不要依赖 “我改了，应该生效了” —— 强制刷新（
Ctrl + F5或Cmd + Shift + R），并勾选 Network 面板的Disable cache
Vue/React 项目里 link 顺序还受构建工具影响
在 Vite 或 Webpack 项目中，即使你在 index.html 里写了正确的 <link> 顺序，如果用了 @import 或 CSS-in-JS（比如 styled-components），它们生成的样式默认插入到 最后，实际执行顺序可能和 HTML 里写的不一致。
- Vite 用户：检查
vite.config.ts是否启用了css.preprocessorOptions或插件自动注入样式，这类注入通常无序 - React + emotion/styled-components：它们的样式表默认动态挂载，若要确保优先级，得手动控制插入位置，比如用
CacheProvider指定容器 - Vue SFC 中用了
scoped，那里面的样式不会影响全局类（如.container），但如果你在<style scoped></style>里写.btn { color: red; }，它根本不会生效——因为框架的.btn不在该组件 DOM 节点上
调整顺序时最容易忽略的细节
顺序不是排完就完事。比如你把 theme.css 放最后，但它里面只写了 .header { color: blue; }，而前面的 base.css 已经定义了 .header { font-size: 1.2rem; padding: 16px; }，结果 theme.css 一加载，.header 就只剩颜色，其他样式全丢了——因为没显式继承或重申。
- 后加载的 CSS 应该补全而非覆盖：要么复制基础样式再改，要么用更具体的选择器（如
body.dark .header）限定作用域 - 避免在多个文件里反复定义同一类名，尤其是工具类（
.hidden、.flex），冲突概率极高 - 上线前务必检查构建产物中的
index.html，确认最终输出的<link>顺序和开发时一致——有些插件会在打包阶段重排资源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
