直接改.dropdown-item:active不生效，需同时覆盖:focus状态并重置box-shadow，禁用outline时须补box-shadow:none；移动端真机测试关键，Android Chrome可能将点击映射为focus，iOS存在focus延迟；若为标签，必须连:visited一并覆盖，否则二次点击颜色跳变；Bootstrap 5.2+推荐用--bs-dropdown-link-active-color等CSS变量统一控制，旧版本需回退选择器方案。
直接改 .dropdown-item:active 不生效？先确认触发状态
点击下拉项时颜色一闪就恢复，大概率不是没写样式，而是被 :focus 覆盖了。bootstrap 默认给 .dropdown-item:focus 设了背景和 outline，且点击后焦点仍保留（尤其键盘操作后），视觉上会“抢走” :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 则可能延迟触发 focus，导致颜色切换不同步
改颜色要连 :visited 一起覆盖
下拉项如果是 标签，浏览器对已访问链接有强默认行为（比如变紫色），哪怕你写了 .dropdown-item:active { color: white; }，用户第二次点同一项，颜色也会回退。
必须显式声明：
-
.dropdown-item:visited和.dropdown-item.active:visited都得重置颜色 - 否则在 Chrome/Firefox 下，点击后颜色会“跳变”或失效
用 CSS 变量统一控制更稳（Bootstrap 5.2+）
Bootstrap 5.2 起支持 --bs-dropdown-link-color、--bs-dropdown-link-hover-color、--bs-dropdown-link-active-color 这类变量。改一处，所有相关状态自动响应，包括深色模式切换。
只需在 或全局样式开头加：
:root {
--bs-dropdown-link-active-color: #fff;
}
注意两点：
为什么加 !important 才生效？其实是顺序和权重问题
不是必须用 !important，而是你的 CSS 被 Bootstrap 默认规则压住了。常见原因：
- CSS 文件引入顺序不对：确保自定义 CSS 在 Bootstrap CSS
之后加载 - 选择器权重不够：比如只写
.dropdown-item:active，而 Bootstrap 用的是.dropdown-menu .dropdown-item:active，后者权重更高 - 推荐做法：提高选择器特异性，例如用
.navbar .dropdown-menu .dropdown-item:active，而不是硬塞!important
用 !important 是临时解法，容易埋坑——比如后续想用 JS 动态切换主题时，内联样式或 JS 设置的颜色会被它锁死。
