确保自定义css在bootstrap.css之后加载是覆盖失效最常见的原因；浏览器按顺序解析样式表，后加载的同权重规则才会生效，因此必须将bootstrap.min.css置于custom.css之前引入。
确保自定义CSS在bootstrap.css之后加载
这是覆盖失效最常见的原因。浏览器按顺序解析样式表，后加载的同权重规则才会生效。如果你的custom.css写在bootstrap.min.css前面，那几乎不可能覆盖成功。
检查 HTML 的 顺序，必须是：
<link href="bootstrap.min.css" rel="stylesheet"><link href="custom.css" rel="stylesheet">
- 用开发者工具的「Computed」面板看某条属性（比如
font-family）来源，如果显示来自 bootstrap 文件，说明你的 CSS 根本没参与层叠 - Webpack/Vite 等构建工具中，确保
@import或import语句也遵循同样顺序：先bootstrap，再你的样式 - Vue/React 单文件组件里若用了
<style scoped></style>，需加:deep(.btn)穿透，否则选择器被隔离，压根不匹配
别只改 body 或用 * { font-family: ... }
Bootstrap 5 的组件（.btn、.form-select、.dropdown-item）不继承 body 字体，它们硬编码了 font-family 声明或依赖 CSS 变量。全局通配符会污染第三方库（如 ECharts、Quill），且被浏览器视为低优先级。
- 正确做法是改
:root中的变量：--bs-font-sans-serif，例如：:root { --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } - 再补漏关键组件：
.form-select, .dropdown-menu, .toast-header等显式声明font-family: var(--bs-font-sans-serif) - 记得配
@font-face和<link rel="preload">，否则字体加载延迟会导致闪动
覆盖按钮颜色不能只写 .btn-primary { background-color: ... }
Bootstrap 5.2+ 完全基于 CSS 变量驱动按钮状态（:hover、:active、:disabled）。直接写 background-color 会被变量值覆盖，且漏掉任一状态就会“闪回”默认色。
- 推荐方式：重设变量，一行生效，全状态联动：
.my-form .btn-primary { --bs-btn-primary-bg: #7e57c2; --bs-btn-primary-border-color: #5e41a3; --bs-btn-primary-hover-bg: #6a49b0; --bs-btn-primary-disabled-bg: #a894c9; } - 如果只能用纯 CSS（比如 CMS 后台只允许加
<style></style>），必须堵死所有状态：.btn.btn-primary、.btn.btn-primary:hover、.btn.btn-primary:active、.btn.btn-primary:disabled、.btn.btn-primary:focus-visible全部显式写出 - 每个状态里
background-color、border-color、color三者必须同步调，否则文字不可读或边框突兀
用 Sass 重定义变量比硬写 CSS 更可靠
如果你项目用的是 Bootstrap 的 Sass 源码（bootstrap.scss），改变量是源头解法，避免后期维护时被新版本样式反杀。
- 变量必须在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前声明，例如：$primary: #2c3e50; $border-radius: 6px;
- 不是所有变量都可重写——只有源码
_variables.scss中带!default标记的才行，查源码确认 - 改完需重新编译 CSS；若用官方定制构建器，变量修改后导出的 CSS 已含全部逻辑，无需额外覆盖
- 深色模式下变量不会自动切换，得手动加
@media (prefers-color-scheme: dark)块重写一遍
真正卡住人的往往不是“怎么写”，而是没意识到 Bootstrap 的样式控制已从类名属性转向变量驱动，以及不同组件对继承的“故意不响应”。漏掉一个伪类、错一个加载顺序、少补一个组件选择器，都会让效果看起来“没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
