本文详解如何通过 CSS 正确覆盖 Bootstrap 5 中 .dropdown-item 在 :focus 状态下的默认蓝色背景，将其改为红色，并指出常见选择器错误（如误用 .nav-link.active :focus）及 !important 的合理使用场景。
本文详解如何通过 css 正确覆盖 bootstrap 5 中 `.dropdown-item` 在 `:focus` 状态下的默认蓝色背景，将其改为红色，并指出常见选择器错误（如误用 `.nav-link.active :focus`）及 `!important` 的合理使用场景。
在 Bootstrap 5 中，下拉菜单中的可点击项（如“Action”“Another action”）由 元素实现。其默认聚焦（keyboard 导航或点击后仍处于焦点状态）背景色由 Bootstrap 内置样式 .dropdown-item:focus 控制，值为 #e9ecef（浅灰）或主题色变体（如深色模式下可能为蓝），而非 .nav-link 的激活态样式。
你原代码中使用的 CSS 规则：
.nav-link.active :focus {
background-color: red !important;
}
存在两个关键问题：
-
选择器目标错误：
.nav-link.active匹配的是顶部导航栏的激活链接（如“Home”），而下拉菜单中的选项属于.dropdown-item，与.nav-link无嵌套关系； -
空格导致后代选择器失效：
.nav-link.active :focus表示“.nav-link.active元素内部的任意:focus元素”，但.dropdown-item并非其子元素，该规则完全不生效。
✅ 正确做法是直接针对 .dropdown-item 元素定义 :focus 状态：
.dropdown-item:focus {
background-color: red !important;
}
⚠️ 注意：Bootstrap 5 的
.dropdown-item:focus默认带有outline: 0和box-shadow: inset 0 0 0 0.25rem rgba(13, 110, 253, 0.25)（蓝色高亮）。若需完全移除轮廓并仅保留纯色背景，可一并重置：.dropdown-item:focus { background-color: red !important; outline: none !important; box-shadow: none !important; }
此外，如需同时支持鼠标悬停（:hover）与键盘聚焦（:focus）的一致体验，推荐合并伪类：
.dropdown-item:hover,
.dropdown-item:focus {
background-color: red !important;
outline: none !important;
box-shadow: none !important;
}
? 重要提醒：
-
!important在此场景下是必要的，因为 Bootstrap 的原始样式权重较高（如.dropdown-item:focus已带!important或高优先级源码），直接覆盖需同等强度； - 避免滥用
!important——仅在定制组件状态样式且无法通过提升选择器特异性解决时使用； - 若项目使用 Sass，更推荐通过自定义
$dropdown-link-hover-bg和$dropdown-link-focus-bg变量全局覆盖，实现更可持续的主题管理。
最终效果：当用户用 Tab 键导航至下拉项，或点击后该项仍保持焦点时，背景将稳定显示为红色，符合可访问性（WCAG）对焦点可见性的要求。
