CSS计数器通过counter-reset和counter-increment实现自定义序号，需在父元素重置、子元素递增，并用::before+content显示；支持样式参数但不支持字符串拼接或计算，可访问性需结合语义HTML保障。
用 counter-reset 和 counter-increment 控制序号生成
HTML 默认的 <ol> 只能用简单数字或字母，真要自定义（比如 “Step-1”、“Item-A-001” 或跳过某些编号），必须靠 CSS 计数器。核心是两步：先重置计数器，再在每个 <li> 上递增并显示。
常见错误是只写 counter-increment 却忘了在父元素（如 <ol> 或 <ul>）上加 counter-reset，结果序号全为 0 或不显示。
-
<ol style="counter-reset: step">—— 必须设在列表容器上，名称（step）可自定义，但要和后面保持一致 -
<li style="counter-increment: step">—— 每个<li>触发一次递增 - 用
::before+content: "Step-" counter(step)插入自定义前缀
用 content 和 counter() 渲染带格式的序号
counter() 函数支持第二个参数控制样式，比如 counter(step, upper-alpha) 输出 A、B、C；counter(step, decimal-leading-zero) 输出 01、02。但它不能直接拼接字符串数字（如 “001”），得靠 CSS 自定义计数器配合 counters() 嵌套或 JS 补零。
注意：content 只在伪元素中生效，不能写在 <li> 的普通样式里；另外，counter() 返回的是纯文本，无法参与计算或绑定事件。
立即学习“前端免费学习笔记（深入）”；
- 要实现 “Item-001”，得用
counter(step, decimal)+ 额外 CSS（如font-variant-numeric: tabular-nums对齐）或改用 JS 动态写入 - 多级列表（如 1.1、1.1.1）优先用
counters(step, ".")，比手动嵌套更可靠 - 如果序号需要响应式变化（比如移动端隐藏前缀），直接控制
::before的display即可，不用动 HTML 结构
当 <ol> 的 start 属性不够用时换 CSS 计数器
<ol start="5"> 只能设起始数字，没法跳号（如 1→3→7）、插文字、或按条件开关。这时候 CSS 计数器是唯一出路。
典型场景：文档中某段被删除后，后续步骤序号需自动重排；或一组 <li> 中部分条目不参与计数（比如说明项），只需给它 counter-increment: none。
- 跳号写法：
<li style="counter-increment: step 2">让下一项+2 - 暂停计数：
<li style="counter-increment: none">，该<li>不触发递增 - 重置局部计数：
<li style="counter-reset: substep">在某个<li>内启动子计数器
兼容性和可访问性绕不开的坑
所有主流浏览器都支持 CSS 计数器，但屏幕阅读器不一定朗读 ::before 生成的内容。如果序号对理解流程关键（比如操作步骤），光靠 CSS 渲染会丢失语义。
更稳妥的做法是：用 <ol> 保底（提供原生序号和语义），再用 CSS 计数器覆盖视觉样式；或者把序号作为 <span> 写进 HTML，用 CSS 控制显隐——虽然增加 markup，但确保可访问性不打折。
另外，打印 PDF 时部分引擎（如 wkhtmltopdf）对 counter() 支持不稳定，测试时务必导出验证。
