必须同时设置 .dropdown-item:active, .dropdown-item:focus 背景色，因 Bootstrap 默认 :focus 样式会覆盖 :active；还需处理 :visited、CSS 变量 --bs-dropdown-link-active-bg 及 :hover 等状态以确保视觉一致。
直接改 .dropdown-item:active 为什么颜色一闪就没了
点击下拉项时背景色只闪一下就恢复，不是你没写对，而是 .dropdown-item:focus 在“抢表现”。Bootstrap 默认给 :focus 加了背景色和 box-shadow 模拟焦点环，且点击后焦点仍保留在元素上（尤其键盘操作后），视觉上完全盖掉了 :active 的短暂状态。
必须同时覆盖两个状态：
-
.dropdown-item:active, .dropdown-item:focus一起写，别只盯:active - 如果禁用 focus outline，不能只写
outline: none，还得补box-shadow: none—— Bootstrap 5 默认用box-shadow实现 focus ring - 移动端真机测试不可跳过：Android Chrome 常把点击映射为
focus，iOS 可能延迟触发，导致颜色切换不同步
要改颜色，:visited 必须一起覆盖
如果下拉项是 <a></a> 标签，浏览器对已访问链接有强默认行为（比如变紫色）。哪怕你写了 .dropdown-item:active { background-color: #dc3545; }，用户第二次点同一项，背景色也会回退或跳变。
必须显式声明：
.dropdown-item:visited.dropdown-item.active:visited- 否则在 Chrome/Firefox 下，点击后背景色会“抽搐”或失效
Bootstrap 5.2+ 推荐用 CSS 变量统一控制
比起硬写选择器，改 --bs-dropdown-link-active-bg 更稳，它自动响应所有相关状态（包括深色模式切换）：
:root {
--bs-dropdown-link-active-bg: #dc3545;
}
注意两点：
- 这个变量只影响
.dropdown-item的激活态背景，不控制文字颜色——文字色由--bs-dropdown-link-active-color控制，需单独设 - 如果你项目用了 Sass 编译，且已定义了
$dropdown-link-active-bg，那它会覆盖 CSS 变量——优先检查你自己的_variables.scss
悬停和焦点状态别漏掉，否则视觉割裂
只改 :active 背景，但留着默认的 :hover 或 :focus 样式，会导致鼠标移入、点击、聚焦三种状态颜色不一致，体验断裂。
建议一并覆盖：
-
.dropdown-item:hover—— 鼠标悬停时背景 -
.dropdown-item:focus—— 键盘聚焦或点击后残留焦点 -
.dropdown-item.active—— 手动标记的“当前选中项”（如路由高亮）
它们的背景色最好保持协调，否则用户会感觉菜单“反应不一致”。
