.css变量覆盖比提权更干净：bootstrap 5+支持--bs-btn-color等自定义属性，修改后所有状态自动同步，不增权重、不破坏逻辑，且需在bootstrap引入后、自定义样式前注入。
为什么 .btn { color: red } 完全不生效
不是你写错了，是浏览器根本没选中它——.btn.btn-primary 的选择器权重是 0,0,2,0（两个类），而你的 .btn 只有 0,0,1,0。哪怕你把它放在 Bootstrap CSS 后面，权重低就输。
打开开发者工具 → Elements 面板 → 选中按钮 → 切到 Styles 面板，如果 color: red 被划掉，且来源显示为 bootstrap.min.css，说明它连入场资格都没拿到。
- 用
.btn.my-btn替代.my-btn：给元素加一个自定义类，再组合写，权重立刻升到 0,0,2,0，和.btn.btn-primary平级 - 限定作用域更安全：
.dashboard .btn.my-btn权重 0,0,3,0，避免全局污染 - 别碰
!important：它在内联样式、插件注入、Shadow DOM 场景下会突然失效
加载顺序错位会让权重计算直接失效
即使你写了高权重选择器，如果 bootstrap.min.css 在你的 CSS 文件之后加载，它仍可能覆盖你——因为层叠（Cascade）规则中，“后加载 + 同权重” = 覆盖。
检查 HTML 源码里的 <link> 顺序，不是看 import 语句顺序，而是浏览器实际看到的顺序。Vite/Webpack 打包后可能重排，Django 模板里 {% static %} 路径要真实返回 200。
- CDN 场景下：手动把自定义 CSS 的
<link>放在 Bootstrap<link>下方，且不要加async或defer - Vite 用户注意：
css.preprocessorOptions可能导致注入时机错乱，优先查源码 - React 开发环境常见陷阱：HMR 和 CDN 加载延迟可能导致 Bootstrap “后发先至”，生产构建反而正常
用 CSS 变量覆盖比提权更干净
Bootstrap 5+ 提供了官方扩展入口：CSS 自定义属性。直接改 --bs-btn-color 等变量，所有基于它的状态（:hover、:focus、:disabled）自动同步更新，不增加选择器权重，也不破坏原有逻辑。
变量必须在 Bootstrap 引入之后、自定义样式之前注入，否则会被后续 reset 覆盖；若用 Sass，则应在 @import 'bootstrap' 前定义变量，效果等价但介入更早。
- 正确写法：
:root { --bs-btn-color: #2c3e50; --bs-btn-bg: #3498db; } - 变量名统一以
--bs-开头，完整列表见 Bootstrap 官方_variables.scss - 别在
:root外部覆盖变量，比如写成.my-theme { --bs-btn-bg: red; }—— 这样不会生效
真正难处理的不是“怎么赢”，而是“赢完要不要补一堆新选择器”
用 .btn.my-btn 提权能解决当前按钮，但下个组件（比如 .form-control 或 .nav-link）又得重复一遍。这种模式不可持续。
CSS 变量方案只改一次，影响全局所有衍生状态；Sass 用户提前注入变量，还能参与编译时计算；而靠选择器堆权重，本质是和框架对抗，越往后维护成本越高。
最常被忽略的一点：开发者工具里看到的“生效样式”，未必是你写的那条——Computed 面板显示的是最终结果，但 Styles 面板里被划掉的规则，往往藏着加载顺序或权重的真实线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
