必须同时覆盖 .list-group-item:hover、:active 和 .active 三种状态，且 .active 需加 !important；确保自定义 CSS 在 Bootstrap 后加载，并优先使用 CSS 变量如 var(--bs-primary)。
为什么直接写 .list-group-item:hover 没效果？
Bootstrap 5 默认给 .list-group-item 的 :hover 和 :active 状态加了 background-color: #f8f9fa，但更关键的是——它用 !important 覆盖了部分状态（比如 .list-group-item.active）。如果你只写普通优先级的 CSS，会被 Bootstrap 的内置样式压制。
常见错误现象：CSS 文件已加载、选择器看起来对，但鼠标悬停时背景不变，或点击后激活态一闪就恢复。
- 确保你的自定义 CSS 在 Bootstrap CSS 之后 加载（
<link>顺序不能错） - 避免只覆盖
:hover却忽略:active和.active类，三者行为不同：悬停是临时态，点击是用户触发态，.active是静态标记态 - Bootstrap 5 使用 CSS 变量控制主题色，推荐优先复用
var(--bs-primary)等，而非写死#0d6efd
怎样精准覆盖 .list-group-item 的三种背景状态？
必须同时处理三个场景：悬停（:hover）、点击按压（:active）、显式激活（.active）。否则会出现“悬停变色，但点一下就回退”或“点了没反馈”的割裂体验。
实操建议用以下结构（放在你自己的 CSS 文件里，且在 Bootstrap 之后）：
立即学习“前端免费学习笔记（深入）”；
.list-group-item:hover {
background-color: var(--bs-primary);
color: #fff;
}
.list-group-item:active {
background-color: var(--bs-primary);
color: #fff;
}
.list-group-item.active {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary);
color: #fff;
}
注意：.active 必须加 !important，因为 Bootstrap 的 .list-group-item.active 规则本身带 !important；而 :hover 和 :active 一般不需要，除非你发现被其他样式干扰。
如果用了 data-bs-toggle="list"，还要注意什么？
当列表组配合 JavaScript 切换激活项（如 Tab 式导航），.active 类会由 Bootstrap JS 自动增删。此时你的自定义样式必须能响应这个类的动态切换，不能只依赖伪类。
- 不要用
.list-group-item[data-active]这类自定义属性——JS 不会设置它，只会操作.active类 - 如果项目用了 Sass，更稳妥的方式是在
_variables.scss中重设$list-group-active-bg变量，然后重新编译 Bootstrap，一劳永逸 - 若需兼容深色模式，记得补充
@media (prefers-color-scheme: dark)下的对应变量值，比如var(--bs-primary-dark)
为什么改完还是不生效？检查这三点
最容易被忽略的不是写法，而是上下文干扰：
- 检查浏览器开发者工具里，目标元素上是否真的存在
.list-group-item类——有些组件库（如某些 Admin 模板）会封装一层，实际 DOM 是<div class="my-list-item">，根本没用原生类名 - 确认没有其他 CSS 规则意外设置了
background-image（比如渐变遮罩），它会覆盖background-color - 如果用了 CSS-in-JS（如 Emotion、Styled-components），确保你插入样式的 scope 没被隔离，或显式提高 specificity，例如用
.list-group .list-group-item.active
复杂点在于：悬停、按压、激活三者视觉反馈要一致，但底层触发机制不同；很多人只调了一个，结果交互显得“卡顿”或“无响应”。
