<link>标签顺序决定CSS覆盖优先级，后加载的样式覆盖先加载的同名规则；自定义样式应置于第三方库之后，避免动态插入覆盖，并通过开发者工具排查具体覆盖来源。
link 标签顺序直接影响样式生效优先级
浏览器按 <link> 在 HTML 中的出现顺序依次加载 CSS，后加载的样式会覆盖前面同名规则。如果你发现引入的外部样式没生效，大概率是它被后面引入的其他 CSS 覆盖了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把自定义样式表（如
custom.css）放在所有第三方库（如 Bootstrap、Ant Design）的<link>之后 - 避免在
<head>末尾又插入一个动态创建的<link>，它会覆盖你手动写的静态引入 - 用浏览器开发者工具的
Computed面板查看某条样式被哪条规则覆盖，点击右侧来源可跳转到对应<link>行号
选择器权重不够时，覆盖靠“ specificity ”不是靠 !important
即使 <link> 放对了位置，如果第三方样式用了更具体的选择器（比如 body .container .header h1），你的 h1 { color: red; } 依然赢不了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器检查元素，看
Styles面板中哪些规则被划掉，对比它们的选择器长度和类型 - 优先通过增加选择器层级来提权，比如把
.btn改成body .my-app .btn，而不是一上来就加!important - 避免使用 ID 选择器提权（如
#header .btn），它虽权重高但破坏可复用性，且容易和框架冲突 - 注意属性选择器和伪类也会计入权重：
button[disabled]和button:hover权重高于单纯button
同一 CSS 文件里规则被后写的同名规则覆盖
很多人以为只在多个文件间有覆盖问题，其实单个 CSS 文件里，后面声明的规则也会覆盖前面的——哪怕选择器完全一样。
常见错误现象：
- 在
base.css里写了.card { margin: 10px; }，又在同一个文件底部补了.card { padding: 12px; }，结果margin没了 - 用 PostCSS 或 Sass 的
@import合并多个源文件时，顺序错乱导致预期外覆盖
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
CSS nesting（现代 CSS 或 Sass）把相关样式聚在一起，减少跨段落覆盖风险 - 构建流程中若用
postcss-import，确认其root路径和导入顺序与预期一致，必要时显式写清路径而非依赖模糊匹配 - 开发时打开浏览器的
Disable cache选项，避免因缓存导致你以为改了但实际没生效
/* 示例：这个 .btn 的 color 不会生效，因为后面同选择器的规则覆盖了它 */
.btn {
color: blue;
}
/* …中间可能隔了几十行… */
.btn {
color: red;
font-weight: bold;
}真正难处理的不是“怎么覆盖”，而是“谁在悄悄覆盖你”——尤其是第三方 UI 库带的 CSS-in-JS 注入、微前端场景下运行时动态挂载的样式、或者构建工具自动注入的重置样式。遇到这类情况，得先用 getComputedStyle() 在控制台查真实计算值，再逆向定位来源。
