.active 类仅标记选中状态，不响应点击反馈；点击瞬间的颜色需用 :active 伪类覆盖，且需 !important 或 sass 变量重编译，并注意移动端 touch-action 和 btn-check 的相邻选择器结构。
.active 类在 bootstrap 5 中不控制点击反馈，只做视觉标记；它不会触发 :active 伪类，也不影响交互行为。
为什么改 .btn.active 没用？
很多人想通过覆盖 .btn.active 来改变“按下去”的颜色，结果发现点击按钮时颜色不变——因为 .active 是手动添加的 class（比如用 JS 切换选中态），和鼠标按下瞬间的视觉反馈完全无关。真正响应点击的是 :active 伪类，而 Bootstrap 默认对 .btn:active 有强权重规则（如 .btn-primary:active），直接写 .btn.active 根本不匹配该状态。
- 混淆点：把“当前选中”（
.active）和“正在点击”（:active）当成一回事 - 典型错误：在 CSS 里写
.btn.active { background: red; }，却期待点击按钮时变红 - 真实链路：
mousedown → :active 触发 → mouseup → :active 消失，整个过程和.activeclass 无任何关系
怎么正确修改点击瞬间的颜色？
必须用 :active 伪类，并确保选择器权重足够高。Bootstrap 5.3+ 的默认按钮 :active 样式已简化，部分主题色甚至没设背景变化，所以常需显式覆盖。
- 写法示例：
.btn:active { background-color: #2a5800 !important; border-color: #1e4200 !important; } - 必须加
!important，否则被.btn-primary:active等组合选择器压住 - 移动端注意：iOS Safari 默认忽略
:active，需给按钮加style="touch-action: manipulation;"才能生效 - 如果用 Sass，推荐改变量
$btn-active-bg后重新编译，比全局!important更干净
导航栏 .nav-link.active 和 :active 的区别
导航项最容易踩坑：用户点一下就松开，看到的是 :active；页面跳转后保留高亮的才是 .active。两者样式必须分开处理，不能混用。
-
.nav-link:active控制“点击瞬间”的背景/边框变化（常被 Bootstrap 5.3+ 默认清空，需手动补） -
.nav-link.active控制“当前路由匹配”后的持久高亮，比如 React Router 的NavLink默认加的是active，但实际 class 名可能是active或router-link-exact-active，得 inspect 元素确认 - 常见失效：只写了
.nav-link.active，却没写.nav-link:active，导致点击无反馈
单选按钮（btn-check + label）的“已选中”态怎么设？
Bootstrap 5.3 的 btn-check 方案默认不提供选中态视觉反馈，因为 :active 只闪一下，.active 又不自动同步到 label —— 必须靠 input[type="radio"]:checked + label.btn 这个相邻兄弟选择器来精准定位。
- 结构必须严格是：
<input type="radio"><label class="btn">…</label>，中间不能有空格、换行或注释 - 样式示例：
input[type="radio"]:checked + label.btn { border: 2px solid #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); } - 别试图用
label.btn.active，因为btn-check不会自动给 label 加.active，JS 也不该手动操作这个 class - 这个选择器只在真正选中时生效，松开鼠标也不消失，符合“已选中”语义
最易忽略的是：:active 在移动端默认无效，以及单选按钮结构里隐藏的空白符会破坏 + 选择器匹配。这两处不检查，样式再写对也白搭。
