Bootstrap 5中btn-primary点击态颜色不生效，因默认依赖Sass变量$btn-active-bg且CDN下CSS变量或伪类覆盖易被高权重规则压制；须优先重编译Sass重定义变量，或用高权重选择器如.btn.btn-primary:active配合!important强制生效。
Bootstrap 5 中 btn-primary 点击态颜色不生效？
默认情况下，Bootstrap 5 的按钮点击态（:active）会短暂变暗，但这个效果依赖于 $btn-active-bg 和 $btn-active-border-color 变量，且仅在 Sass 编译时注入。如果你直接用 CDN 引入 CSS，改 CSS 变量或覆盖 :active 伪类却没反应，大概率是选择器权重不够，或被 .btn:active:focus 等更具体规则覆盖。
实操建议：
- 优先在自定义 Sass 中重写
$btn-active-bg变量，再@import "bootstrap"，避免覆盖冲突 - 若只能用 CSS，必须提高选择器 specificity，例如：
.btn.btn-primary:active { background-color: #1a56db !important; } - 注意：Bootstrap 5 移除了
.active类对按钮的“持续激活”样式支持（该类现在只用于导航等组件），所以别试图靠加class="active"来维持点击色
BtnActiveColor 是什么？不是 Bootstrap 原生变量名
Bootstrap 官方 Sass 变量中没有叫 BtnActiveColor 的变量——这是常见误传，可能源于旧版 Bootswatch 主题、第三方文档或拼写混淆。实际对应的是：
-
$btn-active-bg：点击时的背景色（如$btn-primary-active-bg是其派生变量） -
$btn-active-color：点击时的文字色（通常继承自$body-color或反色逻辑） -
$btn-active-border-color：边框色
直接搜 BtnActiveColor 在 Bootstrap 源码里找不到定义，硬写进 _variables.scss 不会生效。
如何安全修改不同按钮类型的点击色？
按按钮类型分别控制更稳妥，避免全局污染。例如想让所有 btn-success 点击时变成深绿色：
- 推荐方式（Sass）：
$btn-success-active-bg: #198754;<br>@import "bootstrap";
- CSS 方式（需覆盖所有状态组合）：
.btn.btn-success:active,<br>.btn.btn-success.active,<br>.btn.btn-success:active:focus {<br> background-color: #198754 !important;<br>} - 注意：Bootstrap 5 对
:focus和:active有组合状态（如:active:focus），漏掉会导致键盘操作时颜色回退
移动端点击态延迟或不触发？
真机上点一下没反应，或要长按才变色，通常是浏览器默认的 300ms 点击延迟干扰了 :active 样式渲染。这不是 Bootstrap 问题，但会让人误以为“点击态失效”。
- 加
touch-action: manipulation到按钮上可缓解：.btn { touch-action: manipulation; } - 更彻底的解法是监听
touchstart/touchend手动加删临时 class，用 CSS 控制，绕过伪类时机不可控的问题 - 部分安卓 WebView 对
:active支持极差，此时伪类方案基本不可靠，必须用 JS + class
点击态颜色本身很简单，难的是它夹在浏览器行为、CSS 层叠、框架状态逻辑之间——稍不注意，改的就不是颜色，而是整个交互节奏。
