根本原因是CSS优先级未超过Bootstrap选择器。应复用其类名结构、后加载自定义CSS、用Sass重定义变量或精准提升选择器权重，避免!important和深度嵌套。
为什么加了自定义 CSS 还是没覆盖 Bootstrap 样式
根本原因是 css 优先级没赢过 bootstrap 的选择器。bootstrap（尤其 v5+）大量使用 .btn.btn-primary 这类复合类、[data-bs-toggle] 属性选择器，甚至内联 style，你的 .my-btn 单一类名天然权重更低。
实操建议：
- 别用
!important硬顶——它会让后续维护变成噩梦，且可能被 Bootstrap 的!important（比如某些工具类）反杀 - 复用 Bootstrap 的类名结构，比如想改按钮背景，直接写
.btn.btn-primary { background-color: #2a5800; }，靠「相同选择器权重 + 后加载」取胜 - 确保你的 CSS 文件在 Bootstrap CSS 之后引入，检查 HTML 中
<link>顺序，或用@import时注意规则顺序 - 如果用 Sass/Less，把自定义样式写在
@import "bootstrap"之后，变量重定义要放在导入前
用 data- 属性或自定义类名安全覆盖组件样式
Bootstrap 官方推荐的方式是保留其结构类（如 .btn），再叠加语义化自定义类（如 .btn-green-submit），然后用更高权重的选择器精准控制。
常见错误现象：只写 .green-submit { background: green; }，但没加 .btn，导致丢失 padding、border-radius 等基础样式，按钮“变样”而不是“换色”。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写：
<button class="btn btn-lg btn-green-submit">提交</button> - CSS 中写：
.btn.btn-green-submit { background-color: #28a745; border-color: #1e7e34; }—— 前缀.btn拉高权重，同时继承所有基础样式 - 避免用 ID 或深度嵌套（如
#header .nav .dropdown .btn），既难维护，又容易因 DOM 变动失效
修改 Bootstrap 变量（Sass 场景）比硬写 CSS 更可靠
如果你用的是 Sass 版本（bootstrap.scss），直接改变量是覆盖默认样式的源头解法，比后期覆盖更干净、可预测。
使用场景：整站统一调整主题色、圆角大小、字体间距等全局参数。
关键点：
- 必须在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/bootstrap";之前，重定义变量，例如：$primary: #2c3e50;<br>$border-radius: 6px;
- 不是所有变量都可重写——只有带
!default标记的才行（查bootstrap/scss/_variables.scss源码确认） - 变量修改后需重新编译 CSS，纯 CDN 引入无法生效
警惕 Bootstrap 工具类的“不可覆盖性”
像 .text-center、.d-none、.fw-bold 这类工具类，内部用了 !important（v5.3+ 默认开启），你写 .my-text { text-align: left !important; } 都可能被它压制。
解决思路不是拼 !important，而是绕开冲突：
- 不用工具类控制关键样式，比如别用
.d-none控制某个组件的显隐，改用自定义类.is-collapsed+ JS 切换 - 禁用特定工具类：在 Sass 中设置
$enable-important-utilities: false;，再编译，但要注意这会影响所有工具类行为 - 用更具体的选择器“挤掉”工具类，例如：
article .card .d-none { display: block; }—— 靠层级和类数提升权重
真正麻烦的从来不是“怎么加样式”，而是加在哪一层、用什么粒度去干预。Bootstrap 的样式设计本身就是层层封装的，跳过结构直接贴补丁，迟早会遇到补丁叠补丁的情况。
