直接覆盖 .btn-primary 的 css 样式在 bootstrap 5.2+ 中大概率失效，因其全面采用带 !important 的 css 变量（如 --bs-btn-primary-bg）动态控制各状态样式，需改变量或高权重多状态覆盖才有效。
直接覆盖 .btn-primary 的 CSS 样式在 Bootstrap 5.2+ 中大概率失效，不是你写错了，而是它根本没机会生效。
为什么 .btn-primary { background-color: #ff6b6b; } 常常不起作用
Bootstrap 5.2 起全面转向 CSS 变量（如 --bs-btn-primary-bg），所有状态（:hover、:active、:disabled）都基于这些变量动态计算，并大量使用 !important。你写的规则权重低、没覆盖全、还被变量值覆盖——三重失效叠加。
- 你的 CSS 文件必须在 Bootstrap 的 CSS 之后加载，否则直接被忽略
-
.btn-primary单独写选择器特异性太低，Bootstrap 原生用的是.btn.btn-primary:hover这类组合，你得至少写成.btn.btn-primary - 漏掉任一状态（比如只改了默认态，没碰
:disabled），用户点一下按钮就“闪回”默认蓝 - 只改
background-color不够：边框色border-color和文字色color必须同步调，否则文字看不见或边框突兀
如果坚持用纯 CSS 覆盖，必须同时处理这四件事
不推荐，但如果你受限于环境（比如只能加 <style></style>，没法改 Sass 或变量），那就得把所有漏洞一次性堵死：
- 选择器必须提高权重：
.btn.btn-primary、.btn.btn-primary:hover、.btn.btn-primary:active、.btn.btn-primary:disabled全部显式写出 - 每个状态里三属性齐上：
background-color、border-color、color—— 缺一不可 - 深色模式下不会自动切换，得手动加
@media (prefers-color-scheme: dark)块重写一遍 - 如果用了
.btn-outline-primary，它不读background-color，而依赖--bs-btn-color和--bs-btn-border-color，你得额外覆盖这些变量
真正起效的最小改动：用 CSS 变量替代硬覆盖
与其写一堆 !important 规则，不如直接重设 Bootstrap 的变量——一行生效，全状态联动，且不破坏原有逻辑：
:root {
--bs-btn-primary-bg: #7e57c2;
--bs-btn-primary-border-color: #6a49a8;
--bs-btn-primary-hover-bg: #6a49a8;
--bs-btn-primary-disabled-bg: #b39ddb;
}
- 变量名必须一字不差，拼错（比如
--bs-btn-primary-bk）就无效 - 只影响局部？把
:root换成容器选择器，比如.my-dashboard .btn-primary { --bs-btn-primary-bg: #7e57c2; } - 这个写法对
.btn-outline-primary同样有效，但它依赖的是--bs-btn-primary-color和--bs-btn-primary-border-color，别漏掉 - 移动端点击反馈弱？补一句
.btn-primary { touch-action: manipulation; }
硬覆盖 .btn-primary 类看似简单，实际是把 Bootstrap 的状态链路整个绕开——你得自己维护所有状态、适配深色模式、同步表单和 Alert 等共用组件，成本远高于改一个变量。真要改颜色，优先动变量；真要加新按钮类，优先用 Sass 的 button-variant()；只有临时调试或极简场景，才考虑手写多状态 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
