调整顺序不一定能解决问题，因为css覆盖取决于选择器权重而非引入顺序；即使自定义样式放在最后，若权重低于第三方规则（如#header .btn > .btn），仍会被覆盖。
为什么调整顺序不一定能解决问题
很多人把自定义样式放到 <link> 最后，结果还是被覆盖——不是顺序错了，是权重没算赢。浏览器确实按 <link> 从上到下解析，但只在「同权重规则」之间才启用这道防线。一旦第三方库用了 #header .btn，而你只写 .btn，哪怕你在最后引入，照样被压。
常见错误现象：
-
reset.css放在业务样式后面，结果button { margin: 0 }被业务里更宽泛的button { margin: 4px }覆盖（因为 reset 用的是标签选择器，权重低） - Webpack 打包后 CSS 被自动合并，HTML 里写的顺序和最终注入 DOM 的顺序不一致
- 某个
<link rel="stylesheet" href="theme.css">返回了 404，根本没进 CSSOM，白调顺序
怎么快速判断谁覆盖了谁
打开 DevTools → 选中元素 → 看右侧 Styles 面板：
- 被划掉的规则 ≠ 失效，只是本轮比输了；盯住它旁边的
specificity值（如0,1,1,1），逐位比较：ID 数 > 类数 > 标签数 - 点开每条规则的文件名和行号，确认来源——常有同名类散落在
components.css和page-home.css里，自己都忘了 - 注意
!important是单独计分的，两个都带!important时，还得回退比 specificity 和源顺序
提升权重比调顺序更可靠
与其反复改 HTML 里 <link> 位置，不如让关键样式天然“更具体”：
- 加父级限定：
.user-profile .avatar比单独的.avatar权重高一级 - 用属性选择器强化语义又不拉高权重：
button[type="submit"].primary（权重 = 类+属性，比纯类略高） - 现代方案优先用
:where()降权而非硬刚：:where(.ant-btn) { color: red; }——括号内选择器不参与权重计算，彻底避开冲突 - 避免 ID 选择器（
#save-btn），它虽权重高，但破坏组件复用性，且和 CSS-in-JS、Shadow DOM 天然不兼容
@import 和 @layer 的实际影响差异
@import 不是“高级引入”，它只是把内容粘贴进来，权重完全取决于它在当前文件里的位置。写在 main.css 最末尾的 @import "override.css"，等效于把 override.css 的全部内容复制粘贴到那行——如果前面已有高权重规则，照样输。
@layer 才是目前真正可控的层级方案：
-
@layer base, components, overrides;声明层级顺序 - 所有
@layer overrides { .btn { color: red; } }规则，无论物理位置在哪，都会按层排序生效 - 注意：旧版浏览器不支持，需检查目标环境；Vite/Webpack 默认不处理
@layer，要配 PostCSS 插件
真正难处理的不是“怎么覆盖”，而是覆盖之后别人再想微调时，发现必须加 !important 或套三层父类——这种债务会越滚越大。结构设计比临时加权重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
