因为counter-reset定义计数器作用域，若设在.list-group-item上会导致每个项重置为1；必须设在.list-group容器上，由其统一管理后代递增，确保序号连续。
为什么 counter-reset 要放在 .list-group 上而不是 .list-group-item
因为 CSS 计数器作用域由 counter-reset 所在元素定义——它重置的是该元素的**后代上下文**。如果把 counter-reset: item; 写在 .list-group-item 上，每个 item 都会各自重置为 1，结果全是 “1.”。必须让整个列表容器（即 .list-group）统一管理计数器，才能递增。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
.list-group { counter-reset: item; }是必要前提 - Bootstrap 5+ 的
.list-group默认是display: block，兼容计数器；若自定义改过 display（比如设成flex），需确认仍支持伪元素生成内容 - 避免在
.list-group上同时用counter-increment——它应只出现在要显示序号的子元素上
如何让序号紧贴文字、不破坏 Bootstrap 的默认 padding 和对齐
直接在 .list-group-item::before 插入序号会导致文字整体右移，和原生样式错位。关键是利用绝对定位 + 左侧留白，复用 Bootstrap 的 padding-left 逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.list-group-item设置position: relative; - 用
.list-group-item::before绝对定位到左侧，宽度固定（如width: 2em;），并设置text-align: right; - 通过
padding-left: 2.5em;把内容往右推，腾出序号空间——这个值要略大于::before宽度，防止重叠 - 序号后加
"."用content: counter(item) ".";，比拼字符串更可靠
遇到嵌套列表或混合类型（带链接/按钮的 item）时序号失效怎么办
当 .list-group-item 内部包含 a、button 或其他交互元素，且你试图对这些子元素用 ::before，序号就会乱：要么重复出现，要么被覆盖。根本原因是计数器递增必须绑定到**实际渲染的块级容器**上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终对
.list-group-item（而非其子元素）应用counter-increment: item; - 若 item 内有
<a>，不要给a::before加序号——它继承父级计数器值，但不会触发递增 - 需要悬停高亮时，用
.list-group-item:hover::before控制颜色，别碰counter-increment - 嵌套列表（如二级
.list-group）需单独命名计数器，例如counter-reset: subitem;，避免和外层冲突
IE11 及部分旧版移动端浏览器不显示序号的兼容处理
CSS Counters 在 IE8+ 基本可用，但 IE11 对 counter() 函数在 flex 容器中的行为不稳定；某些安卓 WebView（尤其 4.x）会忽略 ::before 中的 counter()。这不是 Bootstrap 问题，而是底层渲染引擎限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不依赖 JS 回退——那样会破坏语义和可访问性；优先用 CSS 降级方案
- 对老环境，用
@supports not (counter-reset: a) { ... }检测并 fallback 到纯背景图或内联 SVG 序号（需预设最大项数） - 避免在
counter()中使用counter(item, lower-alpha)等格式化——IE11 只认默认十进制 - 若项目必须支持 Android 4.4 WebView，考虑用
list-style-type: decimal;配合ol.list-group替代，但需重写部分 Bootstrap 样式
真正麻烦的不是写几行 CSS，而是得时刻想着：序号属于视觉装饰，不能影响 tab 键顺序、屏幕阅读器播报，也不能在打印时多出来一行空白——所有调整都得绕着这个边界走。
