根本原因是选择器权重不足，.btn（0,0,1,0）低于.bootstrap的.btn.btn-primary（0,0,2,0），需用.btn.my-btn提升至同级权重，或确保自定义CSS在Bootstrap之后加载并检查实际HTML顺序。
直接改 .btn 或 .form-control 几乎必然失效——不是你写错了，是浏览器压根没选你的规则，因为权重输在起跑线上。
为什么 .btn { background: red } 完全不生效
根本原因是选择器权重不足：.btn 权重为 0,0,1,0，而 Bootstrap 自身的 .btn.btn-primary 是 0,0,2,0。哪怕你的 CSS 文件后加载，权重低就输。
- 打开开发者工具 → Elements 面板 → 选中按钮 → 切到 Styles 面板，看
background是否被划掉；点那个被划掉的声明，确认来源是不是bootstrap.min.css - 再看 Computed 面板里最终生效的值来自哪条规则，如果显示的是
.btn.btn-primary，说明你的单类规则连“入场券”都没拿到 - 别只检查 HTML class 有没有加，要看实际匹配到的是哪一条声明
用 .btn.my-btn 提权，而不是堆 !important
复用 Bootstrap 自己的结构逻辑，是最可控、副作用最小的方式。给已有 .btn 的元素加一个自定义类，然后在 CSS 中写组合选择器。
- HTML：
<button class="btn btn-primary my-btn">Submit</button> - CSS：
.btn.my-btn { background-color: #d32f2f; }—— 权重升到 0,0,2,0，和.btn.btn-primary平级，无需!important - 如需限定作用域，加父容器前缀：
.dashboard .btn.my-btn（权重 0,0,3,0），安全又可控 - 避免
!important的三个翻车点：Bootstrap 组件内联样式、Dark Reader 插件、Vue/React 的<style scoped>或 Shadow DOM 场景下它会突然失效
JS 动态组件（如 Modal、Tooltip）样式脱钩
这些组件默认挂载到 document.body，天然跳出任何 HTML 容器，CSS 选择器匹配失败是静默的，连报错都没有。
立即学习“前端免费学习笔记（深入）”；
- 初始化时必须显式传
container选项：new bootstrap.Modal(el, { container: '.my-bs' }) - 用
data属性时，统一加data-bs-container=".my-bs"，否则 JS 按默认逻辑找body - 如果用了命名空间（如
.my-bs），所有动态插入的 DOM 节点都必须落在该容器内，否则样式完全失效 - 多个命名空间共存（如前台/后台）时，
container值必须唯一，避免互相污染
构建工具里 CSS 加载顺序不可信
你以为 import 'bootstrap.min.css' 后面写 import './custom.css' 就稳了？Vite/Webpack 可能把所有 CSS 打包进一个 index.css，并按依赖图重排顺序。
- 打开浏览器「查看页面源代码」，确认
<link rel="stylesheet">标签中，你的 CSS 确实在bootstrap.min.css之后 - CDN 场景下，把自定义 CSS 的
<link>明确放在 Bootstrap<link>下方，且不要加async或defer - Vue 单文件组件里的
<style scoped>不参与全局层叠，别指望它覆盖.btn - React 中若用 create-react-app，开发环境与生产构建的 CSS 加载行为可能不一致，务必实测
真正难处理的不是静态按钮，而是 Modal、Tooltip 这类 JS 动态挂载到 document.body 的组件——它们天然跳出任何 HTML 容器，CSS 匹配失败是静默的，连报错都没有。
