应优先通过CSS变量（如--bs-dropdown-link-hover-bg）覆盖Bootstrap 5+的悬停样式，而非直接写.dropdown-item:hover规则；需确保CSS在Bootstrap后加载，并同步处理:focus、:visited及深色模式、移动端适配。
直接改 .dropdown-item:hover 为什么颜色没变
不是 CSS 没写对，而是 Bootstrap 5+ 默认用 CSS 变量（如 --bs-dropdown-link-hover-bg 和 --bs-dropdown-link-hover-color）控制悬停样式，你写的 .dropdown-item:hover { background-color: red; color: white; } 很可能被变量值覆盖——浏览器开发者工具里能看到该规则被划掉，说明权重不够或变量劫持了渲染。
优先用 CSS 变量统一改，而不是硬写 hover 规则
改变量更稳，能自动同步到 :focus、深色模式切换、甚至未来版本新增的状态（比如 :active 或动画过渡）。但必须确保你的 CSS 在 Bootstrap 之后加载。
- 全局改（影响所有下拉菜单）：
:root { --bs-dropdown-link-hover-bg: #007bff; --bs-dropdown-link-hover-color: #fff; } - 局部改（只作用于某个导航栏）：
.my-navbar .dropdown-menu { --bs-dropdown-link-hover-bg: #2c3e50; --bs-dropdown-link-hover-color: #ecf0f1; } - 深色模式下需单独覆盖：
@media (prefers-color-scheme: dark) { :root { --bs-dropdown-link-hover-bg: #34495e; --bs-dropdown-link-hover-color: #bdc3c7; } }
必须同步处理 :focus 和 :visited 状态
只改 hover，键盘用户 Tab 进去时文字/背景还是默认色；如果 .dropdown-item 是 <a> 标签，第二次点击会触发浏览器默认的紫色 :visited 样式，导致颜色跳变。
-
.dropdown-item:focus必须和 hover 保持一致，否则可访问性不达标 -
.dropdown-item:visited和.dropdown-item.active:visited都要显式重置，否则 Chrome/Firefox 下二次点击后背景或文字色会回退 - 若用了
dropdown-menu-dark，它会重设变量，得在.dropdown-menu-dark下再写一遍变量覆盖
移动端真机测试不能跳过
Android Chrome 常把点击映射为 :focus，iOS 可能延迟触发或忽略 :hover。这意味着你在桌面调好的悬停色，在手机上根本不会出现——它压根不触发 :hover，只走 :focus 流程。
- 真机上重点验证：点击后是否立刻显示预期背景/文字色
- 不要依赖
:hover作为唯一视觉反馈，至少补一个:focus的等效样式 - 如果项目支持主题切换（比如 JS 动态改
:root变量），!important写死的color会失效，变量方案才是可持续解法
