直接写 .dropdown-item:hover { color: red; } 有时无效，是因为 bootstrap 5.2+ 使用 css 变量（如 --bs-dropdown-link-hover-color）控制悬停色，变量值会覆盖手动设置的 color；常见原因包括选择器权重不足、深色模式类名干扰、sass 变量预编译覆盖；推荐优先覆盖 css 变量，并同步设置 :focus 和 :visited 状态以保障可访问性。
为什么直接写 .dropdown-item:hover { color: red; } 有时无效
不是选择器写错了，而是 Bootstrap 5.2+ 默认用 CSS 变量（如 --bs-dropdown-link-hover-color）控制悬停文字色，你写的 color 值会被变量值覆盖。开发者工具里能看到样式被划掉，说明变量劫持了你的声明。
常见失效点有三个：
-
.navbar-light .dropdown-menu .dropdown-item:hover这类带父级限定的选择器权重更高，压过了你简写的.dropdown-item:hover - 实际渲染的是
.dropdown-menu-dark .dropdown-item:hover，而你只改了普通模式下的规则 - 项目用了 Sass 自定义了
$dropdown-link-hover-color，编译后生成的 CSS 已提前覆盖了你的样式
推荐做法：优先覆盖 CSS 变量，而非硬写 color
改变量更干净、可维护，且能自动适配深色模式切换和后续版本升级。
全局统一改（适合全站下拉菜单风格一致）：
:root {
--bs-dropdown-link-hover-color: #ffffff;
--bs-dropdown-link-hover-bg: #007bff;
--bs-dropdown-link-focus-color: #ffffff;
--bs-dropdown-link-focus-bg: #007bff;
}
局部单独改（避免污染其他下拉菜单，比如只改导航栏里的）：
.my-navbar .dropdown-menu {
--bs-dropdown-link-hover-color: #2c3e50;
--bs-dropdown-link-hover-bg: #ecf0f1;
--bs-dropdown-link-focus-color: #2c3e50;
--bs-dropdown-link-focus-bg: #ecf0f1;
}
注意两点：
- 必须确保你的 CSS 在 Bootstrap 的 CSS 之后加载，否则变量不会被重设
-
:focus状态必须同步设置——键盘用户 Tab 进入时触发的是 focus，不是 hover；漏掉它会导致可访问性问题
如果必须用选择器硬覆盖，怎么写才可靠
当项目结构复杂、变量方案难落地时，用高权重选择器 + !important 是合理手段（Bootstrap 自身也大量使用）。
正确写法示例（兼顾浅色/深色模式）：
.my-navbar .dropdown-item:hover,
.my-navbar .dropdown-item:focus {
color: #fff !important;
}
@media (prefers-color-scheme: dark) {
.my-navbar .dropdown-item:hover,
.my-navbar .dropdown-item:focus {
color: #e0e0e0 !important;
}
}
关键细节：
- 不要只写
:hover，:focus必须并列声明，否则键盘导航无反馈 - 如果下拉项是
<a></a>标签，还得加.my-navbar .dropdown-item:visited，否则二次点击颜色会跳回浏览器默认紫色 - 移动端没有 hover，但部分 Android/iOS 浏览器会模拟一次，不能依赖它作为唯一交互提示
检查是否生效的最快方式
打开浏览器开发者工具（F12），选中一个 .dropdown-item 元素，在 Styles 面板搜索 --bs-dropdown-link-hover-color：
- 如果看到的值是你设的（比如
#ffffff），说明变量覆盖成功 - 如果还是 Bootstrap 默认值（如
#212529），立刻检查 CSS 加载顺序或作用域是否写错（比如漏了.my-navbar前缀） - 如果变量值对了但文字没变色，再看该元素是否被
.dropdown-menu-dark包裹——它会重设变量，得在.dropdown-menu-dark下再写一遍
真正容易被忽略的是焦点状态和已访问链接的连带处理，调完 hover 就以为结束，结果键盘用户一 tab 就暴露问题。
