直接改 .btn:active 需加 !important 或用 css 变量覆盖，因其易被 bootstrap 高权重规则（如 .btn-primary:active）或 :where() 降权机制覆盖；移动端需加 touch-action: manipulation 才生效。
直接改 .btn:active 就行，但必须加 !important 或用 CSS 变量覆盖，否则几乎一定不生效。
为什么 .btn:active 常常改不动？
Bootstrap 默认的 .btn:active 规则权重高，比如 .btn-primary:active 是复合类选择器，而你只写 .btn:active 会被覆盖。更麻烦的是，5.3+ 版本大量使用 :where() 包裹基础规则，它把选择器权重压到 0，反而让原生 .btn:active 更难被普通样式命中。
常见错误现象：
- 写了
.btn:active { background: #333; }，但点击时颜色没变 - 在开发者工具里看到自己的规则被划掉（strikethrough），说明被更高优先级规则覆盖
- 移动端 Safari 完全没反应——那是默认禁用了
:active的触控反馈
怎么安全可靠地改点击态？
推荐两条路径，按项目复杂度选：
- 简单项目：在自定义 CSS 中写
.btn:active { background-color: #2a5800 !important; border-color: #1e4200 !important; }，并确保该 CSS 在 Bootstrap 之后加载 - 中大型项目：用 CSS 变量统一控制，例如在
:root里重设--bs-btn-active-bg和--bs-btn-active-border-color，Bootstrap 5.2+ 原生支持 - 必须补
touch-action: manipulation到按钮上，否则 iOS Safari 不触发:active - 如果按钮是用
<a></a>标签模拟的，得同时写a.btn:active，因为语义不同导致选择器不匹配
改点击态时最容易漏掉的三个点
很多人只盯着背景色，结果上线后体验割裂：
-
.btn:active必须和.btn:hover、.btn:focus的圆角（border-radius）、阴影（box-shadow）保持一致，否则按下瞬间边框会“跳” - 文字颜色（
color）也要同步调整，尤其深色背景上，别让文字在点击时突然不可读 - 禁用态（
.btn:disabled）下不能有:active效果，但有些自定义规则会意外泄漏过去，需显式重置：.btn:disabled:active { background-color: inherit; }
真正麻烦的不是改样式本身，而是所有状态之间的一致性——hover/focus/active/disabled 四个伪类一旦有一处脱节，用户就会觉得按钮“卡顿”或“失灵”。这不是视觉问题，是交互信任问题。
