最直接方式是用更高权重选择器覆盖，如.list-group .list-group-item:hover或加!important，并确保CSS在Bootstrap之后加载；推荐优先使用CSS变量--bs-list-group-hover-bg全局或局部定义，兼顾主题化与维护性。
如何覆盖 .list-group-item:hover 的默认背景色
bootstrap 默认给 .list-group-item 的悬停状态设置了浅灰背景（#f8f9fa），想改它，最直接的方式是用更高优先级的 css 覆盖。别试图改 bootstrap 源码或重编译，现场覆盖更可控、可维护。
关键点在于选择器权重：必须比 Bootstrap 原生的 .list-group-item:hover 更强。常见错误是只写 .list-group-item:hover { background-color: #007bff; }，但可能被覆盖失效。
- 推荐写法：
.list-group .list-group-item:hover或加!important（仅当嵌套深、权重难控时） - 确保你的 CSS 在 Bootstrap CSS 之后加载，否则规则不生效
- 如果用了 Sass，可在自定义变量后重写
$list-group-hover-bg，但需确认你项目里启用了该变量注入逻辑
使用 :hover 时要注意伪类顺序
如果你同时设置 :focus、:active 等状态，顺序错了会导致悬停效果被意外覆盖。Bootstrap 内部是按 :hover → :focus → :active 排序的，你自定义时也得保持这个顺序，否则点击后悬停色可能残留。
- 正确顺序：
:hover、:focus、:active - 错误示例：
.list-group-item:focus:hover { ... }—— 这种组合伪类几乎没用，浏览器不支持多伪类链式触发 - 移动端注意：iOS Safari 对
:hover支持不稳定，部分设备需点击才触发，建议搭配:active做 fallback
修改后影响 .list-group-item.active 吗
不影响。.active 是独立状态类，有自己的背景色（Bootstrap 默认是蓝色）。但如果你写了过于宽泛的规则，比如 .list-group-item:hover, .list-group-item.active 一起设背景，就会误伤 active 状态。
- 最佳实践：分开声明，避免合并选择器干扰
- 检查 DevTools 中 computed styles，确认
.list-group-item.active:hover是否意外继承了悬停色（它本应保持 active 色） - 如需让 active 项悬停时不变色，可显式重置：
.list-group-item.active:hover { background-color: inherit; }
用 CSS 变量实现主题化切换
如果项目需要多主题（比如暗色模式），硬编码颜色值不灵活。Bootstrap 5.3+ 支持 CSS 变量，可以利用 --bs-list-group-hover-bg。
- 全局改写：
:root { --bs-list-group-hover-bg: #e3f2fd; } - 局部作用域（如某个列表）：
.my-list-group { --bs-list-group-hover-bg: #fff3cd; } - 注意：该变量仅在 Bootstrap 启用 CSS 变量支持时生效（即未禁用
enable-css-variablesSass 变量）
