Bootstrap Dropdown菜单项激活状态文字颜色修改

下拉菜单点击后文字颜色无法修改？不必急于怀疑CSS编写错误。此问题的根源通常隐藏在Bootstrap的伪类优先级之中，且不同版本、不同标签、不同设备的表现存在明显差异。以下将详细拆解几个最容易出错的环节。

直接修改 .dropdown-item:active 为何无效

并非样式编写错误，而是Bootstrap默认使用 :focus 覆盖了 :active 的视觉表现。点击操作后，焦点仍停留在该选项上（尤其在键盘操作后），:focus 的背景与轮廓会直接取代所设置的 :active 颜色。仅编写 :active 无法生效。

• 必须同时覆盖 .dropdown-item:active, .dropdown-item:focus
• 若禁用 outline，不能仅写 outline: none，还需补充 box-shadow: none——Bootstrap 5默认使用 box-shadow 模拟焦点环
• 移动端真机测试不可省略：Android Chrome通常将点击映射为 focus，iOS 则可能延迟触发，颜色不同步通常源于覆盖不完整

下拉项为链接时，:visited 必须一并重置

当 .dropdown-item 使用 标签时，浏览器对已访问链接具有强默认行为（例如显示为紫色）。即便编写了 .dropdown-item:active { color: #fff; }，用户再次点击同一选项时，颜色仍会回退为紫色。

• 必须显式声明：.dropdown-item:visited, .dropdown-item.active:visited, .dropdown-item:focus:visited
• 否则在Chrome/Firefox环境下，点击后文字颜色会出现“跳变”或完全失效
• 不覆盖 :visited，相当于给用户留下一个肉眼可见的缺陷

Bootstrap 5.2及以上版本推荐使用CSS变量统一控制

直接编写 color 加 !important 容易与主题切换、深色模式产生冲突。Bootstrap 5.2开始支持 --bs-dropdown-link-active-color，修改一处即可使所有相关状态自动响应。

• 全局生效：在 或全局样式开头添加 :root { --bs-dropdown-link-active-color: #fff; }
• 局部生效：为特定下拉菜单添加一个类（如 my-dropdown），再编写 .my-dropdown .dropdown-menu { --bs-dropdown-link-active-color: #2c3e50; }
• 注意：该变量仅影响Bootstrap内部用到它的组件（如 .dropdown-item），原生 标签不在此范围内

旧版本Bootstrap（5.0–5.1）只能使用选择器方案

若仍使用Bootstrap 5.0或5.1，--bs-dropdown-link-active-color 尚未引入，变量方案无法使用，只能依靠选择器权重进行覆盖。

• 写法示例：.dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:focus { color: #fff !important; }
• 添加 !important 是合理手段——Bootstrap自身大量使用该方式，不加反而容易被覆盖
• 确保CSS文件在Bootstrap的CSS之后加载，否则规则不会生效

实际操作中最常卡在三个环节：伪类未写全（遗漏 :visited 或 :focus）、变量未生效（版本不对或加载顺序错误）、移动端未进行真机验证。这些细节一旦遗漏，颜色就会呈现“看起来已修改，但实际使用不正确”的状态。