必须先用counter-reset初始化计数器，否则counter-increment无效；::before需配合content: counter()才能显示数字；自定义编号需手动控制定位与对齐；现代浏览器兼容良好，但IE8及以下不支持。
如何用 counter-reset 和 counter-increment 初始化序号逻辑
直接在 ol 或容器上设 counter-reset，才能让 counter-increment 有起点。不设 counter-reset，counter-increment 就不会生效——这是最常被忽略的前提。
常见错误是只写 counter-increment: item; 却忘了重置计数器，结果序号全为 0 或根本不显示。
-
counter-reset: item;—— 在父容器（如ol、ul或任意块级元素）上声明，初始化计数器名为item -
counter-increment: item;—— 在每个要编号的子元素（如li、div.item）上递增 - 若需从 2 开始编号，写成
counter-reset: item 1;（第二个参数是起始值，从 0 开始计）
为什么 ::before 必须配合 content: counter() 才能显示数字
::before 本身只是伪元素占位符，不带内容；counter() 是唯一能读取并渲染计数器当前值的函数。漏掉 content，或写成 content: ""，序号就完全不可见。
注意：counter() 默认输出十进制整数，但可加第二个参数切换样式：
立即学习“前端免费学习笔记（深入）”；
-
content: counter(item);→ “1”, “2”, “3” -
content: counter(item, lower-alpha);→ “a”, “b”, “c” -
content: counter(item, upper-roman);→ “I”, “II”, “III”
第二个参数必须是 CSS 标准关键字，不能写成字符串如 "lower-latin"（引号会导致失效）。
自定义列表项缩进与序号对齐的关键控制点
原生 ol 的缩进由浏览器默认 padding-left 和 list-style-position 控制；而用 ::before 实现时，这些规则全部失效，需手动调。
- 给列表项（如
li）设position: relative;，再给::before设position: absolute;+left定位，是最稳定对齐方式 - 避免依赖
margin-left推动文字——它会影响后续行的包裹位置，尤其多行文本时容易错位 - 若序号需右对齐（如“1.”靠右），可用
text-align: right配合固定宽度容器，但更推荐用flex+justify-content: space-between拆分序号和内容区域
兼容性与性能要注意的边界情况
counter 系列属性在所有现代浏览器中支持良好（Chrome 2+、Firefox 1+、Safari 3.1+、Edge 12+），但有两个真实存在的坑：
- IE8 及更早版本完全不支持
counter-increment和counter()，若需兼容，得回退到内联<span>1.</span>或 JS 生成 - 动态插入新列表项（如 JS
appendChild）后，无需额外操作——CSS 计数器会自动重算，但前提是新元素也匹配了counter-increment选择器 - 嵌套计数器（如 1.1、1.2）要用
counters()函数，且层级名必须严格对应counter-reset声明，拼错一个字母就降级为 0
真正难调试的，往往是嵌套层级里某个父容器漏写了 counter-reset，或者 counter-increment 作用到了不该递增的元素上——这时打开开发者工具，逐层检查 computed 样式里的 counter-increment 是否被正确继承，比猜更快。
