直接写 .list-group-item 失效是因为 bootstrap 5 使用高优先级子选择器 .list-group > .list-group-item，需提高权重或用 .list-group > .list-group-item 显式限定；:first-child 不总生效是因干扰元素破坏顺序，应改用 :first-of-type 或属性选择器；状态样式须用组合选择器如 .list-group > .list-group-item.active 精确覆盖；响应式需在媒体查询中手动补全子元素规则，避免残留效果。
为什么直接写 .list-group-item 会失效？
Bootstrap 5 的 .list-group 默认用 display: flex 布局，且子元素（.list-group-item）是直接子元素，但很多开发者误以为加个全局样式就能覆盖——其实 Bootstrap 的 CSS 优先级更高，尤其当它用 .list-group > .list-group-item 这种子选择器时，你只写 .list-group-item 就会被压制。
真正起效的方式是提高选择器权重或更精确地定位：
- 用子选择器显式限定：
.list-group > .list-group-item - 加
!important是下策，容易引发后续覆盖冲突 - 避免用类名重复叠加（如
.list-group-item.list-group-item），Bootstrap 不依赖这种写法
:first-child 和 :last-child 在 .list-group 中为何不总生效？
因为 .list-group 内部可能混入非 .list-group-item 元素（比如分隔线 <hr>、自定义 <div> 或带 <code>.list-group-item 类但没嵌套在 .list-group 下的孤立节点），这时 :first-child 匹配的是整个 DOM 顺序里的第一个子节点，不一定是第一个 .list-group-item。
稳妥做法是用 :first-of-type 或属性选择器：
-
.list-group > .list-group-item:first-of-type—— 只匹配类型为.list-group-item的首个元素 -
.list-group > [class*="list-group-item"]:first-child—— 更宽松，但可能误匹配其他含该字符串的类 - Bootstrap 5.3+ 支持
.list-group-item:first-of-type直接生效，前提是结构干净（无<hr>等干扰）
如何给不同状态的 .list-group-item 单独设样式？
Bootstrap 自带 .active、.disabled、.list-group-item-primary 等状态类，但它们的样式规则分散在多个地方（基础样式、工具类、状态覆盖），直接覆盖容易漏掉伪元素或背景渐变。
推荐写法是用组合子选择器 + 状态类，并注意继承链：
-
.list-group > .list-group-item.active—— 覆盖激活态背景和颜色 -
.list-group > .list-group-item.disabled:hover—— 显式禁用 hover 效果（否则鼠标悬停时仍可能触发默认 transition） -
.list-group > .list-group-item.list-group-item-success—— 注意这类色彩类是“叠加型”，不是替换型，需重置background-color和color才能完全控制
示例：让成功项文字加粗且无边框
.list-group > .list-group-item.list-group-item-success {
font-weight: 600;
border: none;
background-color: #d4edda;
}
响应式断点下 .list-group-horizontal 的子选择器怎么写？
.list-group-horizontal 本质是通过媒体查询切换 flex-direction，但它本身不改变 DOM 结构。问题在于：你在 sm 断点启用水平布局后，.list-group-item 的 margin、padding、border-radius 行为全变了，而 Bootstrap 的响应式类（如 .list-group-horizontal-sm）只影响父容器，不自动注入子元素新规则。
必须手动补全断点内样式：
- 水平排列时圆角只保左右两端：
@media (min-width: 576px) { .list-group-horizontal-sm > .list-group-item:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } } - 移动端竖排时恢复上下圆角，但要防止与
.list-group-item.active冲突，建议把 active 的圆角重置逻辑也放进同一媒体查询块里 - 慎用
flex: 1给.list-group-item，会导致宽度计算异常，改用flex-basis: 0+flex-grow: 1更可控
复杂点在于：Bootstrap 的响应式类是“开关式”的，它不会帮你清理旧样式。你写的子选择器一旦脱离断点上下文，就可能在错误尺寸下残留效果。
