css计数器通过counter-reset（设于ol）和counter-increment（设于li）控制序号，content: counter()在::before中插入；需兼顾可访问性，避免纯css生成导致屏幕阅读器无法识别。
用 counter-reset 和 counter-increment 控制序号值
HTML 默认的 <ol></ol> 只支持简单数字、字母或罗马数字，真要显示 “Step-1”“2024-001” 或跳着编号（比如 1、3、5），必须绕过 type 属性，改用 CSS 计数器。核心是手动重置、递增、插入计数器值。
常见错误是只加 counter-increment 却漏掉 counter-reset，导致序号从 0 开始或重复；或者在 <li> 上直接写内容，没用 ::before 插入，结果序号和文字叠在一起。
-
counter-reset必须设在<ol></ol>上（默认重置为 0），若想从 100 开始，写成counter-reset: step 99 -
counter-increment设在<li>上，每次渲染就 +1；支持多计数器，如counter-increment: step section - 用
content: counter(step)在<li>::before</li>里插入，不能写在<li>的文本内容里
实现 “Step-1” “Step-2” 这类前缀序号
这是最常搜的场景。关键不是改 HTML，而是用 CSS 拼接字符串。注意 content 中的引号是必需的，且空格会被保留。
ol.step-list {
counter-reset: step;
}
ol.step-list li {
counter-increment: step;
}
ol.step-list li::before {
content: "Step-" counter(step) " ";
font-weight: bold;
}
如果想让序号右对齐、前缀左对齐，得额外加 display: flex 或负 margin-left —— 浏览器不会自动对齐 ::before 生成的内容和后续文字。
跳号、倒序、非连续编号怎么写
计数器本质是变量，可以任意增减。比如做故障排查列表，需要 “1. 检查电源 → 3. 检查网线 → 5. 重启设备”，不用删 <li>，只需调整 counter-increment 的步长。
- 跳号：把
counter-increment: step 2（每次 +2） - 倒序：先
counter-reset: step 5，再counter-increment: step -1 - 手动指定值：用
counter-set（CSS Counter Styles Level 3，Chrome 117+ / Firefox 117+ 支持），如li:nth-child(2) { counter-set: step 100; }
旧浏览器不支持 counter-set，此时只能靠多个 <ol></ol> + start 属性拼接，但语义和可访问性会变差。
兼容性与可访问性风险
屏幕阅读器通常只读 <li> 的文本内容，不读 ::before 生成的序号。如果去掉原生 <ol></ol> 的 list-style 又没在 DOM 里保留数字，视障用户可能完全不知道当前是第几项。
- 稳妥做法：保留原生序号（
list-style-position: inside），再用::before叠加自定义前缀，避免覆盖 - 不要用
aria-hidden隐藏原生序号，除非你同时用aria-label把完整序号写进去 - IE 完全不支持 CSS 计数器，
start属性也仅支持整数，无法实现 “a, c, e” 这类跳字母
真正难的不是写出来，是让序号既好看又可读、既灵活又健壮——尤其当列表要被打印、导出 PDF 或被爬虫解析时，纯 CSS 生成的内容大概率丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
