css规则不生效是因为选择器权重不足，.btn（0,0,1,0）低于.bootstrap的.btn.btn-primary（0,0,2,0），需用.btn.my-btn提升至同级权重，或确保自定义css在bootstrap之后加载并检查实际html顺序。
为什么 .btn { background: red } 完全不生效
根本不是你写错了，而是浏览器压根没选你的规则——它被 .btn.btn-primary 挡在了外面。.btn.btn-primary 权重是 0,0,2,0（两个类），而你的 .btn 只有 0,0,1,0。即使 CSS 文件后加载，权重低就输。
打开开发者工具 → Elements 面板 → 选中按钮 → 切到 Styles 面板，看 background 是否被划掉；再点那个被划掉的声明，确认来源是不是 bootstrap.min.css。如果 Computed 面板里显示的值来自 .btn.btn-primary，说明你的单类规则连入场券都没拿到。
确保自定义 CSS 在 Bootstrap 之后加载才真正有效
加载顺序是第一道防线，但在现代构建工具里极易失效。你以为 import 'bootstrap/dist/css/bootstrap.min.css' 后面写 import './custom.css' 就稳了？不一定。
- Vite 或 Webpack 可能把所有 CSS 打包成一个
index.css，并按模块依赖图重排顺序 - 必须检查浏览器里最终渲染的 HTML 源码，确认
<link rel="stylesheet">标签中，你的 CSS 确实在bootstrap.min.css之后 - Vue 单文件组件里的
<style scoped></style>不参与全局层叠，别指望它覆盖.btn - CDN 场景下，把自定义 CSS 的
<link>明确放在 Bootstrap<link>下方，且不要加async或defer
用 .btn.my-btn 而不是 .my-btn 提权到平级
Bootstrap 本身靠组合类工作，你硬加 !important 是对抗，而复用它的结构是协同。给已有 .btn 的元素再加一个自定义类，然后在 CSS 里写 .btn.my-btn，权重立刻升到 0,0,2,0，和 .btn.btn-primary 平起平坐。
HTML：<button class="btn btn-primary my-btn">Submit</button>
CSS：.btn.my-btn { background-color: #d32f2f; }——不需要 !important，也不污染全局。
如果要限定范围，加父容器前缀：.dashboard .btn.my-btn（权重 0,0,3,0），安全又可控。
避免 !important 的三个翻车现场
!important 看似快，但会在这些地方突然失效：
- Bootstrap 组件内部用了内联样式（如
style="color: var(--bs-danger);"），内联权重 1000 > 类+!important - 用户装了 Dark Reader 等插件，它用更高权重或 JS 注入样式，直接覆盖你
- Vue/React 的
<style scoped></style>或 Shadow DOM 会隔离作用域，!important出不去
真正可控的提权方式是复用 Bootstrap 自己的结构逻辑，而不是堆砌 ID 或无差别加 !important。权重计算是静态的，但实际生效受加载时机、作用域隔离、内联样式等多层干扰——得一层层查，不能只盯着一个 class 名改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
