link标签顺序决定同权重css规则的生效结果，后加载的相同特异性规则必覆盖前者；常见失效原因包括特异性不等、@import插队、动态插入位置错误、路径404、构建工具重排及preload未配对等。
link 标签顺序直接决定同权重 CSS 规则的最终生效结果，不是“可能覆盖”，而是浏览器渲染引擎的确定性行为——后加载的 link 中相同特异性的规则，一定会覆盖前面的。
为什么改了 link 顺序样式还是没变？
大概率掉进了这几个坑：
- 你以为在覆盖，其实特异性（specificity）根本不对等：
#header .btn（101）天然压过.btn（10），顺序再靠后也无效 -
@import悄悄插队：哪怕main.css写在base.css后面，只要它内部有@import 'theme.css';，theme.css实际注入时机就晚于整个main.css的其余部分 - 动态插入的
link默认追加到head末尾，天然比所有静态link都晚，比如 Vue 或 emotion 自动挂载的样式表 - 路径写错或返回 404，控制台只报 “Failed to load resource”，但样式缺失你却以为是顺序问题
怎么快速确认是不是 link 顺序导致的失效？
别猜，用 DevTools 直接验证：
- 选中目标元素 → 右侧 Styles 面板里找被划掉（strikethrough）的那条声明
- 点击划掉项旁的文件名，跳转到源码位置，看它来自哪个
link；如果来源文件在你写的 CSS 文件之后，基本就是顺序错了 - 临时删掉其他
link，只留你的 CSS 文件，刷新看样式是否出现 - 打开 Network 面板，确认所有 CSS 请求状态码都是
200，排除加载失败干扰
link 顺序写对了，但构建工具悄悄改了它
Vite、Webpack 或框架本身可能重写最终 HTML 中的 link 顺序：
- Vite 的
css.preprocessorOptions或插件（如vite-plugin-style-import）可能自动注入样式，且默认插在head最后 - React + styled-components/emotion 生成的样式表是 JS 动态创建并
appendChild到head，天然晚于静态link - Vue SFC 的
<style scoped></style>不影响全局类，但如果你在其中写了.btn，它根本不会匹配到组件外的按钮元素 - 检查浏览器里最终渲染出的 HTML 源码（右键 → View Page Source），而不是你写的
index.html原文
preload 和 insertBefore 这些操作容易被忽略
rel="preload" 不等于 rel="stylesheet"，它只下载不应用：
- 错误写法：
<link rel="preload" href="critical.css" as="style"> <link rel="stylesheet" href="app.css">→critical.css完全不会生效 - 正确写法：必须配对使用，且
<link rel="stylesheet" href="critical.css">要放在其他样式link之前 - JS 动态插入时，
document.head.insertBefore(newLink, document.head.firstChild)才能确保新样式在最前；appendChild总是追加到末尾，极易被盖掉 - Safari 对
rel="preload" as="style"支持较晚（iOS 15.4+），旧版本会直接忽略 preload
真正难的不是记住“后加载覆盖前加载”，而是在 @import、构建工具注入、动态挂载、preload 配对、media 属性切换这些机制叠加时，还能一眼看出 Computed 面板里那条生效规则到底来自哪一层、为什么赢。每次怀疑顺序问题，先看 DevTools 的 Styles 面板里哪条被划掉、点开文件名确认 DOM 位置，比反复调换 link 顺序更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
