Bootstrap 5 默认为 .btn-primary:active 设置了高优先级样式（如蓝色背景），仅用普通 CSS 选择器覆盖无效；必须使用 !important 或更高特异性规则才能强制生效。
bootstrap 5 默认为 `.btn-primary:active` 设置了高优先级样式（如蓝色背景），仅用普通 css 选择器覆盖无效；必须使用 `!important` 或更高特异性规则才能强制生效。
在 Bootstrap 5 中，按钮的交互状态（:hover、:active、:focus）由框架内置的高特异性样式控制。即使你已通过自定义 CSS 修改了 .btn-primary 的默认背景色和悬停效果，点击时按钮仍会短暂变回蓝色——这是因为 Bootstrap 的源码中类似以下规则具有更高权重：
.btn-primary:active, .btn-primary.active {
background-color: #0d6efd !important; /* Bootstrap 默认蓝色 */
border-color: #0a58ca;
}⚠️ 注意：!important 在此处并非“不良实践”，而是必要手段——因为 Bootstrap 5 的 CSS 文件中大量使用了 !important 来保障组件行为一致性，你的自定义样式若未匹配同等优先级，将被忽略。
✅ 正确解决方案如下（推荐写在 Bootstrap 引入之后的自定义 CSS 中）：
/* 覆盖默认激活态，必须加 !important */
.btn-primary:active,
.btn-primary.active {
background-color: #e39400 !important;
border-color: #e39400 !important;
}
/* 同时建议补充 focus 状态，保证键盘可访问性 */
.btn-primary:focus,
.btn-primary:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(227, 148, 0, 0.25) !important;
}? 提示：
- 若项目中使用 Sass，更推荐通过重写 Bootstrap 变量（如 $primary）并在编译前注入，实现全局主题统一；
- 避免对多个状态（如 :active, :focus, .active）遗漏定义，否则可能引发视觉不一致或可访问性问题；
- 测试时请同时验证鼠标点击、空格键触发及屏幕阅读器反馈，确保符合 WCAG 标准。
最终效果：按钮点击瞬间将保持你设定的橙色系（#e39400），不再跳回默认蓝色，交互体验完全可控。
