CSS计数器做自动编号。

CSS 计数器（CSS Counters）能用三行声明给任何重复元素自动编号：counter-reset 定起点、counter-increment 递增、content: counter() 显示，不写 JS、不手写数字，增删条目后编号自动重排。

三步走：reset、increment、显示

结论：CSS 计数器永远是同一个套路——父级归零、子项递增、伪元素显示，三者缺一不可。

.list { counter-reset: item; }             /* 1. 定义计数器并归零，作用域含所有后代 */
.list > li { counter-increment: item; }    /* 2. 每个子项 +1 */
.list > li::before {
  content: counter(item) ". ";             /* 3. 输出当前值 */
  color: #888;
}

三点必须记牢：

第一，counter-reset 写一次就够，写在父容器上，所有后代共享同一个计数器实例。写在每个 li 上会导致每个都是 1。想从 10 开始编号，写 counter-reset: item 9，元素递增后就是 10。

第二，content 只在 ::before、::after、::marker 里生效。把 content 写在普通元素上不会有任何效果，这是新手最常见的踩坑点。

第三，counter-increment 建议写在元素本身而不是 ::before 上，语义更清楚，也不受伪元素盒模型影响。

编号样式：罗马数字、中文、前导零都不用自己拼

结论：counter() 的第二个参数直接复用 list-style-type 那一套取值，想要什么格式改参数就行。

• content: counter(item, upper-roman) → I. II. III.
• content: counter(item, lower-alpha) → a. b. c.
• content: counter(item, cjk-decimal) → 一、二、三
• content: counter(item, decimal-leading-zero) → 01、02、03

如果这些还不够，用 @counter-style 自定义规则集，可以定义前后缀、进制、循环符号，注册后同样能传给 counter() 使用。

嵌套编号：1.1、1.2 用 counters()

结论：多级列表要用带 s 的 counters()，它会把同名计数器在各层的值拼接成一条链。

ol { counter-reset: sec; list-style: none; }
li { counter-increment: sec; }
li::before { content: counters(sec, ".") " "; }
ol ol { counter-reset: sec; }   /* 进入下一层时归零，实现 1.1 / 1.2 */

counters(sec, ".") 的第二个参数是连接符，换成 "-" 就得到 1-1、1-2 的效果。文章目录、多级大纲、章节编号都靠这个。

四个容易翻车的细节

结论：计数器好用，但有几个行为跟直觉不一样，提前知道能省一小时调试。

1. display: none 的元素不参与计数，用它做「条件显示 + 连续编号」会断号。
2. 计数器名区分大小写，item 和 Item 是两个互不相干的计数器。
3. 伪元素里的编号不进剪贴板，也不会被屏幕阅读器朗读。如果编号是内容的一部分（比如「第一步：注册」），务必在 HTML 里也写出来，或补 aria-label，别让信息只活在 CSS 里。
4. 现代浏览器已支持 counter-reset: item reversed(10) 做反向倒计数，但旧内核兼容性一般，正式项目建议先测目标环境。

什么时候该用它

结论：凡是「条目数量会变、编号要连续」的重复结构，都值得交给 CSS 计数器。

典型场景有三类：一是列表自动编号，比如答题选项、排行榜名次；二是多级目录，用 counters() 输出 2.3.1 这种层级号；三是后台渲染的表行号、论坛楼层号、问答聚合页里 FAQ 的序号——只要它们是同一个 DOM 结构循环渲染出来的，编号就不需要后端再算一遍序号字段，也不需要前端 forEach 时手动拼 index。条目被删除、排序被调整时，编号跟着 DOM 自动重排，永远不会出现断号或重号。

需要提醒的是，计数器只负责「显示层编号」，不改变 DOM 顺序，也不生成可被爬虫抓取的文本。如果你需要编号参与 SEO 或数据导出，仍要在服务端把序号落成真实文本。

一句话收束：counter-reset 起头、counter-increment 步进、content: counter() 露面，多级用 counters()，格式靠第二个参数，避开 display: none 和纯伪元素承载信息这两个坑，自动编号这件事就不用再写一行业务代码了。