必须同时覆盖 .dropdown-item:active 和 :focus 才能稳定生效，因 Bootstrap 默认用:focus模拟焦点环且点击后焦点常驻；推荐用 CSS 变量 --bs-dropdown-link-active-bg 统一控制，兼顾深色模式与权重问题。
直接改 .dropdown-item:active 和 :focus 才生效
点击下拉项时背景色一闪就恢复，不是没写样式，而是 :focus 抢了表现权。bootstrap 默认给 .dropdown-item:focus 设了背景色和 box-shadow 模拟焦点环，且点击后焦点常保留在元素上（尤其键盘操作后）。只写 :active 几乎一定失效。
必须同时覆盖两个状态：
-
.dropdown-item:active, .dropdown-item:focus写在同一条规则里 - 如果禁用 outline，不能只写
outline: none，还得补box-shadow: none——Bootstrap 5 默认用 shadow 实现 focus ring - 移动端真机测试不可跳过：Android Chrome 可能将点击映射为 focus，iOS 则有 focus 延迟，颜色切换可能不同步
用 CSS 变量统一控制更稳（Bootstrap 5.2+）
Bootstrap 5.2 起支持 --bs-dropdown-link-active-bg 变量，改一处，:active 和 :focus 状态自动响应，还兼容深色模式切换。
只需在全局样式开头加：
:root {
--bs-dropdown-link-active-bg: #dc3545;
}
注意两点：
- 这个变量只影响
.dropdown-item的激活态背景，不影响.dropdown-toggle或其他组件 - 如果你项目用 Sass 编译，且已定义了
$dropdown-link-active-bg，那它会覆盖 CSS 变量——优先检查你自己的_variables.scss
为什么加了 !important 还不生效？
常见三处卡点：
- 你的 CSS 文件加载顺序在 Bootstrap 之前，被默认样式盖掉了
- 实际渲染的是
.navbar-light .dropdown-menu .dropdown-item:active这类高权重父级限定选择器，你写的.dropdown-item:active权重不够 - 用了
.dropdown-menu-dark，但只改了普通模式下的规则，深色模式下仍走默认变量值
推荐写法（兼顾浅/深色）：
.my-dropdown .dropdown-item:active,
.my-dropdown .dropdown-item:focus {
background-color: #dc3545 !important;
box-shadow: none;
}
@media (prefers-color-scheme: dark) {
.my-dropdown .dropdown-item:active,
.my-dropdown .dropdown-item:focus {
background-color: #c82333;
}
}
别碰 .dropdown-item.active，那是当前页高亮状态
.dropdown-item.active 是手动加的 class，用于标记“当前选中项”，比如路由匹配后高亮导航项。它和用户点击瞬间的激活反馈（:active / :focus）完全无关。
混淆这两者会导致：
- 以为改了
.active就能控制点击反馈，结果毫无反应 - 误删或覆盖
.active样式，导致页面跳转后导航项不亮 - 在 React/Vue 中，
.active常由框架自动添加（如NavLink或router-link-active），不该用它模拟点击态
真正要动的是伪类，不是 class；而伪类里，:focus 的权重和持续性往往比 :active 更关键——这点最容易被忽略。
