必须同时覆盖 .dropdown-item:active、:focus 和 :visited 状态，因 Bootstrap 默认 :focus 样式会覆盖 :active，且已访问链接的 :visited 行为会导致二次点击颜色跳变；Bootstrap 5.2+ 推荐使用 --bs-dropdown-link-active-color 变量统一控制，旧版需高权重选择器加 !important 并确保 CSS 后加载。
直接改 .dropdown-item:active 不会生效，必须同时覆盖 :focus 和 :visited 状态，并优先使用 CSS 变量（Bootstrap 5.2+）或确保选择器权重足够（旧版）。
为什么只写 .dropdown-item:active 没反应
点击后文字颜色一闪就恢复，不是样式没加载，而是 Bootstrap 默认的 .dropdown-item:focus 样式“抢走”了视觉表现。点击后焦点仍保留在元素上（尤其键盘操作后），:focus 的背景、文字色和 box-shadow 会覆盖 :active 的设置。
- 必须成对写：
.dropdown-item:active, .dropdown-item:focus - 如果禁用了
outline，别忘了补box-shadow: none——Bootstrap 5 默认用box-shadow模拟 focus ring - 移动端真机测试不能跳过：Android Chrome 常把点击映射为
focus，iOS 可能延迟触发，颜色不同步就说明漏了状态
必须显式重置 :visited 才能避免二次点击跳变
如果 .dropdown-item 是 <a> 标签，浏览器对已访问链接有强默认行为（比如变紫色）。哪怕你写了 .dropdown-item:active { color: #fff; }，用户第二次点同一项，文字颜色仍会回退。
- 必须一起声明：
.dropdown-item:visited, .dropdown-item.active:visited, .dropdown-item:focus:visited - 否则在 Chrome/Firefox 下，点击后颜色会“抽搐”或失效
- 不加
:visited覆盖，等于留了一个可复现的视觉 bug
Bootstrap 5.2+ 推荐用 --bs-dropdown-link-active-color 变量
硬写 color + !important 容易和主题切换、深色模式冲突。Bootstrap 5.2 起支持该变量，改一处，所有相关状态自动响应。
- 全局生效：
:root { --bs-dropdown-link-active-color: #2c3e50; } - 局部生效：给特定菜单加类如
my-dropdown，再写.my-dropdown .dropdown-menu { --bs-dropdown-link-active-color: #2c3e50; } - 注意：该变量只影响 Bootstrap 内部用到它的组件（如
.dropdown-item），原生<a>不在此列 - 旧版本（5.0–5.1）不支持此变量，只能回退选择器方案
旧版 Bootstrap（5.0–5.1）只能靠选择器权重硬刚
变量方案无效时，得用高权重选择器 + !important 强制覆盖。这是合理手段——Bootstrap 自身大量使用 !important，不加反而容易被压。
- 推荐写法：
.dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:visited, .dropdown-menu .dropdown-item.active:visited { color: #fff !important; } - 确保你的 CSS 文件在 Bootstrap 的 CSS 之后加载，否则规则根本不会生效
- 常见卡点：伪类没写全（漏掉
:visited或:focus）、CSS 加载顺序错、或父级限定（如.navbar-light .dropdown-menu）干扰了选择器匹配
最常被忽略的是 :visited 和移动端 focus 映射逻辑——它们不报错，但会让颜色在真实设备上“偶尔失效”，调试时得真机连 F12 看 computed styles 里最终生效的 color 值是否是你设的。
