最可靠方式是用counter-reset初始化、counter-increment递增、li::before结合counter()显示数字并用border-radius:50%等样式绘制圆圈，需设list-style:none防原生符号重叠。
用 CSS counters 实现带序号的圆圈背景
直接用 ::before 伪元素 + counter-increment 是最可靠的方式，不依赖 HTML 序号（比如 ol 的默认行为），也不需要手动写数字。浏览器兼容性好（Chrome 2+、Firefox 2+、Safari 3.1+ 都支持）。
- 给父容器（如
ul或ol）设置counter-reset: item - 给每个列表项（
li）设置counter-increment: item - 在
li::before中用content: counter(item)显示数字，并通过border-radius: 50%、background和display: inline-flex控制圆圈样式
注意 list-style: none 必须显式清除
如果不加 list-style: none，部分浏览器（尤其是 Safari）会在圆圈左边额外渲染原生项目符号，导致错位或重叠。这不是 bug，而是 CSS 规范中 list-style 和 ::before 的叠加行为。
-
li上必须写list-style: none，不能只靠父级设置 - 如果用了
ol，还要加ol { padding-left: 0; }，否则左侧留白会偏移圆圈位置 - 避免用
display: flex直接包裹li，它会破坏counter的作用域——计数器只在同级块容器内生效
圆圈尺寸和居中对齐的常见坑
数字在圆圈里“看起来没居中”，通常不是 line-height 或 vertical-align 的问题，而是 flex 容器的基线和字体下沉特性造成的。直接用 inline-flex + justify-content: center + align-items: center 最稳。
- 圆圈宽高建议用固定值（如
width: 24px; height: 24px;），避免文字撑开变形 - 字体大小设为圆圈高度的 60%~70%（例如
font-size: 14px配24px圆圈），防止数字贴边 - 别用
text-align: center——它只对块级内容有效，而::before默认是 inline，需display: inline-flex才能真正居中
需要从指定数字开始或跳号怎么办
counter-reset 支持起始值，counter-increment 支持步长，比手写 value 属性更灵活，也适用于非 ol 场景（比如 div 列表）。
- 从 100 开始：写
counter-reset: item 99（因为它是“重置为该值 + 1”） - 每次加 2：写
counter-increment: item 2 - 多个计数器嵌套（如 “1.1”, “1.2”）可用
counter(item, decimal)配合二级counter-reset，但简单编号没必要复杂化
圆圈背景本质是视觉装饰，序号逻辑必须和 DOM 结构一致；如果 JS 动态增删 li，记得确保 counter-increment 始终应用在所有目标元素上，否则序号会断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
