一眼识别引入顺序问题：打开DevTools选中元素，Styles面板中被划掉的样式若来源文件排在你CSS之前且权重相同（如均为.btn），即为顺序错误；再验证Network中CSS是否200、构建后HTML中link顺序是否正确。
怎么一眼看出是不是引入顺序问题
别猜，直接打开 DevTools → 选中元素 → 看 Styles 面板里被划掉（strikethrough）的规则。点击划掉样式旁的文件名，跳转到对应 <link> 标签位置。如果它出现在你写的 CSS 文件之前，且选择器权重相同（比如都是 .btn），那基本就是顺序错了。
再快速验证：临时删掉其他 <link rel="stylesheet">，只留你的 CSS 文件，刷新看样式是否出现；同时检查 Network 面板，确认所有 CSS 文件状态码是 200，排除路径 404 干扰判断。
HTML 里 link 标签怎么排才不翻车
顺序不是“越靠后越强”，而是按「约束力由宽到窄、覆盖意图由通用到专属」来组织：
-
reset.css或normalize.css必须最前 —— 否则* { box-sizing: border-box; }可能根本没机会生效 -
variables.css（含css custom properties）必须在使用它的文件之前加载，否则var(--primary)会回退为initial - 组件级样式（如
button.css、card.css）放中间，复用性强但不应决定最终表现 - 页面或主题样式（如
home-page.css、dark-theme.css）必须最后 —— 它们才是“拍板人”
特别注意：@import 在 CSS 文件内部使用时，实际加载时机晚于外部 <link>，会打乱预期顺序，应禁用。
立即学习“前端免费学习笔记（深入）”；
Vite/Webpack 项目里顺序为什么还是乱
你写的 <link> 顺序可能被构建工具覆盖：
- Vite 中若启用了
css.preprocessorOptions或某些注入插件（如vite-plugin-css-injected-by-js），生成的<link>默认插入末尾 - Webpack 使用
MiniCssExtractPlugin时，CSS 合并顺序取决于 JS 入口里的import语句，不是 HTML 中的<link>位置 - 动态
import()加载的 CSS 不保证插入顺序，慎用于关键样式
真正要检查的不是源 index.html，而是构建后生成的 HTML（如 dist/index.html），确认最终 <link> 的 DOM 顺序是否符合预期。
scoped 样式和全局类冲突时怎么办
Vue/React 项目里，<style scoped></style> 编译后会加属性选择器（如 .btn[data-v-f3f5f1]），它根本匹配不到框架提供的全局 .btn —— 所以你写的样式“没生效”，其实是压根没作用到目标元素上。
想覆盖第三方类，有两条路：
- 把覆盖规则写在非
scoped的<style></style>块里，或单独的 CSS 文件，并确保它在中排在框架 CSS 之后 - 在
scoped内部用深度选择器：:deep(.btn)（Vue 3）或>>>（Vue 2）；React + CSS Modules 则需额外引入非模块化样式表
真正难的不是调一次顺序，而是让顺序在开发、构建、部署、甚至微前端多子应用共存时都稳定一致。一个动态插入或插件注入，就可能让精心排列的 <link> 失效。
