Bootstrap按钮的:active仅响应瞬时物理操作，不表示持久选中状态；真正表示“当前激活”的是需JS手动切换的.active类，且5.3+已移除其默认:active样式。
Bootstrap 按钮的 :active 状态默认只做极轻微背景加深（甚至在 5.3+ 中已移除），它不是状态记忆机制，也不负责“当前选中”语义——想靠 :active 实现持久高亮或视觉反馈，一定会失败。
为什么直接改 .btn:active 常常无效
根本原因在于：Bootstrap 的按钮交互逻辑把“瞬时按下反馈”和“持久选中状态”彻底分离了。
-
:active是浏览器原生伪类，仅在鼠标按住/手指触摸期间生效，松开即消失；移动端尤其不可靠，iOS Safari 默认忽略它，除非加touch-action: manipulation - 真正表示“当前激活”的是
.active类（比如.nav-link.active或.btn.active），它需要 JS 手动切换，CSS 才能稳定接管样式 - Bootstrap 5.3+ 主动移除了大部分组件的
:active默认样式（包括.btn和.nav-link），这是设计选择，不是 bug - 用
!important强行覆盖.btn:active虽然能临时起效，但会破坏响应式过渡、与:focus冲突，且在键盘操作路径下表现不一致
input[type="radio"] + label.btn 场景下必须用 :checked 而非 :active
当你用 Bootstrap 的 btn-check 模式实现单选按钮组（如缓冲区选择器），视觉激活态完全依赖真实 input 的 :checked 状态，而不是 label 的 :active。
- HTML 结构必须严格为
<input><label>相邻，中间不能有空格、注释或其它节点，否则+兄弟选择器失效 - 正确规则是：
input[type="radio"]:checked + label.btn { border: 2px solid #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); } - 别试图在 React 的
style={{}}里写:checked—— 它不支持伪类，必须走外部 CSS 或 CSS-in-JS 的插值方案 - 如果还要支持键盘焦点（Tab 进入后回车选中），得额外补一条：
input:focus + label.btn
想让按钮“点击时缩放”，:active 是唯一正解，但要注意 transition 位置
这类纯瞬时动效，:active 反而是最干净的选择，前提是写法正确。
- 缩放规则必须写在常态（非
:active）的 class 下：.btn-click-scale { transform: scale(1); transition: transform 0.15s ease; } -
:active只负责目标值：.btn-click-scale:active { transform: scale(0.96); } - 如果按钮已有 transition（如 Bootstrap 自带的
background-color 0.15s），复用即可，不必重复声明transition - 避免用
scale(0.9)以下，视觉上容易显得“塌陷”，scale(0.96)是实测最自然的压感值
真正容易被忽略的是：Bootstrap 的按钮逻辑把「用户意图」拆成了两层——:active 回应物理操作，.active 表达应用状态。混用或互替，不出问题才怪。你得先想清楚，自己要的到底是“手按下去那一瞬间的确认感”，还是“这个选项现在被选中了”的持续标识。
