根本原因是css权重不足和加载顺序失效：bootstrap高权重选择器（如.btn.btn-primary）优先于自定义单类规则，且构建工具可能打乱css加载顺序；需检查computed面板、确保link顺序、用组合选择器提权并避免滥用!important。
直接在 Bootstrap CSS 文件之后引入自定义 CSS 是最基础、也最容易出问题的覆盖方式——它能生效，但前提是你的选择器权重压得过 Bootstrap 的规则，且没被 !important 或 CSS 变量劫持。
为什么顺序对了还是没覆盖？
Bootstrap 5 的工具类（如 .btn、.text-center）大量使用 !important，且组件样式依赖嵌套结构（比如 .navbar .navbar-brand）。你写 .my-btn { color: red; }，根本打不进它的渲染链。
- 检查 DevTools 中目标元素的「Computed」面板：如果属性值被划掉或显示为灰色，说明被更高优先级规则覆盖
- 确认你没漏掉 Bootstrap 的
reboot.css—— 它重置了button、input等原生样式，很多“变样”其实是它干的 - 别只靠加载顺序：后加载 ≠ 生效，CSS 权重才是硬通货
如何写出真正能压过 Bootstrap 的选择器？
用更具体的选择器结构，而不是堆 !important。目标是精准命中，同时继承 Bootstrap 基础样式。
- 正确写法：
.btn.btn-primary.my-submit-btn→ 同时保留.btn的 padding、border-radius 和.btn-primary的语义，再叠加自定义行为 - 避免 ID 选择器（如
#header .nav .btn），DOM 一改就断 - 用属性选择器增强特异性：
button[type="submit"].btn比单纯.btn更稳 - 浏览器里右键「检查元素」→ 复制 Bootstrap 源码中实际生效的选择器，再在其基础上加你的 class
:root 变量覆盖和自定义 CSS 文件谁该在前？
:root 声明必须在 bootstrap.min.css 之后，但你的自定义 CSS 文件（含类覆盖）也得在它之后——两者不冲突，只是分工不同。
-
:root负责全局变量（如--bs-primary），改的是源头色值，影响所有衍生类 - 自定义 CSS 文件负责结构微调（如
.card-header高度、.form-control字体），补变量做不到的细节 - HTML 中顺序应为：
<link href="bootstrap.min.css">→<style>:root{...}</style>→<link href="custom.css"> - 拼错变量名（比如写成
--primary而非--bs-primary）或漏分号，整行会被浏览器静默忽略
真正难的不是“放后面”，而是判断该用变量覆盖、Sass 重编译，还是手写选择器——多数人卡在没看清 Bootstrap 是用哪一层机制控制目标样式，就急着加 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
