自定义css未生效的根本原因是选择器权重不足、加载顺序错误或未处理!important规则。需确保custom.css在bootstrap后加载，用更高权重选择器（如.btn.my-btn）覆盖，或通过sass重定义变量源头解决。
能覆盖，但必须赢过它的选择器权重、加载顺序和!important规则——不是加个 .my-btn 就能生效的。
为什么你的自定义 CSS 没生效？
常见错误现象：.btn-primary { background: #007bff; } 写了却没变色；按钮文字颜色还是白色；.form-control 圆角被重置成直角。
根本原因不是“没加载”，而是 Bootstrap 的选择器更狠：.btn.btn-primary:focus、[data-bs-toggle="tooltip"]、甚至 .btn:focus-visible 这类组合+伪类的选择器，天然比你单写一个 .my-btn 权重高。
另外，Bootstrap 5+ 大量在工具类里用 !important（比如 .text-center、.d-flex），你没加 !important 就等于默认认输。
浏览器开发者工具里点开元素，看 Computed 面板里哪条样式被划掉、哪条“active”，就能立刻确认是不是权重输了。
确保 CSS 文件加载顺序正确
这是最基础也最容易漏的一步。顺序错了，后面所有技巧都白搭。
必须满足：
-
<link href="bootstrap.min.css">在前 -
<link href="custom.css">紧跟其后（不能用@import在 bootstrap 里面引 custom） - 如果用了 Sass，
@import "bootstrap";必须在你重定义变量之后、写自定义样式之前
检查 HTML 源码或 Network 面板，确认 custom.css 的请求时间晚于 bootstrap.min.css；否则哪怕文件存在，也压根没机会参与层叠计算。
用更高权重的选择器精准覆盖
别只写 .my-btn { background: green; } —— 它连 .btn 的 padding 都继承不到，按钮会塌掉。
正确做法是复用 Bootstrap 的结构类，靠「相同语义 + 更高特异性」取胜：
- HTML 写：
<button class="btn btn-lg btn-success my-submit">提交</button> - CSS 写：
.btn.my-submit { background-color: #28a745; border-color: #1e7e34; }（加.btn前缀拉高权重，同时保留所有基础样式） - 要改导航栏链接 hover 色：
.navbar-nav .nav-link:hover { color: #0056b3; }，而不是只写.nav-link:hover - 避免 ID 或深度嵌套（如
#main .sidebar .card .btn），DOM 结构一动就失效
优先用属性选择器提升权重但不过度，例如：button.my-btn[type="submit"] 比单纯 .my-btn 更稳，且不破坏语义。
Sass 变量重定义才是源头解法
如果你用的是 Sass 版本（不是纯 CDN），改变量比写覆盖 CSS 干净十倍。
关键操作步骤：
- 在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/bootstrap";之前，重定义变量 - 只重写带
!default标记的变量（查_variables.scss源码确认） - 例如：
$primary: #2c3e50;、$border-radius: 6px;、$font-family-sans-serif: "Inter", sans-serif; - 变量改完必须重新编译 CSS，CDN 引入完全无效
注意：$enable-important-utilities: false 这类开关变量也能关掉部分 !important 工具类，但会影响全局行为，改之前先测。
真正难的不是怎么写，而是判断该不该覆盖——有些样式（比如 box-sizing: border-box 全局设置）是 Bootstrap 的底层契约，强行绕开会导致布局错乱，这种时候得接受它，而不是硬顶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
