Bootstrap怎么修改Dropdown下拉菜单项在激活时的背景色

必须同时设置 .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> 标签，浏览器对已访问链接有强默认行为（比如变紫色）。哪怕你写了 .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 —— 手动标记的“当前选中项”（如路由高亮）

它们的背景色最好保持协调，否则用户会感觉菜单“反应不一致”。