必须同时覆盖 .dropdown-item:active、:focus 和 :visited 状态才能生效，因 bootstrap 默认用 :focus 覆盖 :active 视觉表现，且浏览器对已访问链接有强默认样式；bootstrap 5.2+ 推荐使用 --bs-dropdown-link-active-color 变量统一控制。
直接改 .dropdown-item:active 为什么没反应
不是选择器写错了，而是 Bootstrap 默认用 .dropdown-item:focus 抢走了视觉表现。点击后焦点仍保留在元素上（尤其键盘操作后），:focus 的背景色和 box-shadow 会覆盖掉 :active 的短暂状态。只写 :active 等于白写。
必须同时覆盖这两个状态：
.dropdown-item:active.dropdown-item:focus
如果还禁用了 outline，别只写 outline: none，还得补 box-shadow: none——Bootstrap 5 默认用 box-shadow 模拟 focus ring。
为什么必须连 :visited 一起改
如果 .dropdown-item 是 <a></a> 标签，浏览器对已访问链接有强默认行为（比如变紫色）。哪怕你写了 .dropdown-item:active { color: #fff; }，用户第二次点同一项，文字颜色就会回退或跳变。
必须显式声明以下三者：
.dropdown-item:visited.dropdown-item.active:visited.dropdown-item:focus:visited
否则在 Chrome/Firefox 下，点击后颜色会“抽搐”或失效。
Bootstrap 5.2+ 推荐用 CSS 变量统一控制
硬写 color + !important 容易和主题切换、深色模式冲突。Bootstrap 5.2 起支持 --bs-dropdown-link-active-color，改一处，所有相关状态自动响应。
写法示例：
:root {
--bs-dropdown-link-active-color: #2c3e50;
}
注意两点：
- 该变量只影响 Bootstrap 内部用到它的组件（如
.dropdown-item），原生<a></a>不在此列 - 如果你项目用了 Sass 编译，且已定义了
$dropdown-link-active-color，那它会覆盖 CSS 变量——优先检查你自己的_variables.scss
旧版本（Bootstrap 5.0–5.1）只能靠选择器硬刚
这些版本还没引入 --bs-dropdown-link-active-color，变量方案无效，得靠选择器权重和 !important 强制覆盖。
写法示例：
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:visited,
.dropdown-menu .dropdown-item.active:visited,
.dropdown-menu .dropdown-item:focus:visited {
color: #fff !important;
}
关键点：
- 确保你的 CSS 文件在 Bootstrap 的 CSS 之后加载，否则规则根本不会生效
-
!important在这里是合理手段——Bootstrap 自身大量使用它，不加反而容易被压 - 移动端真机测试不能跳过：Android Chrome 常把点击映射为 focus，iOS 则可能延迟触发，颜色不同步就说明没覆盖全
:visited 或 :focus），都会在真实用户操作中暴露视觉 bug。
