用 counter-reset 自定义有序列表序号的唯一可靠路径是配合 counter-increment 与 ::before 手动接管计数：先在父容器设 counter-reset 定义名称和起始值，子元素设 counter-increment 触发递增，再用 content 拼接前缀、后缀或嵌套格式（如 counters(section, ".")），所有样式化均需字符串拼接完成。
如何用 counter-reset 自定义有序列表序号
直接说结论：原生 <ol></ol> 的序号样式无法用 list-style-type 满足复杂需求（比如“第1章”“附录A-1”），必须用 counter-reset + counter-increment + ::before 手动接管计数逻辑。
关键不是“能不能”，而是“要不要绕过默认行为”——一旦需要嵌套编号、跳号、前缀文字或非数字格式，counter-reset 就是唯一可靠路径。
counter-reset 和 counter-increment 必须配对出现
单独设 counter-reset: section; 不会显示任何数字；必须配合 counter-increment: section; 触发计数，再用 content: counter(section); 输出。
-
counter-reset定义计数器名称和起始值（如counter-reset: item 0;从0开始） -
counter-increment决定每次触发时加多少（counter-increment: item 2;就是+2） - 两者作用域必须重叠：通常写在父容器上设
reset，子元素上设increment
常见错误是只写 counter-reset 忘了 increment，结果页面完全不显示数字。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
嵌套列表编号要分层声明计数器
比如“1.1 → 1.1.1”，不能只靠一个计数器递增，得为每级定义独立计数器，并在 content 中用 counter(outer) "." counter(inner) 拼接。
ol {
counter-reset: section;
}
ol li {
counter-increment: section;
}
ol li::before {
content: counters(section, ".") " ";
}
counters() 函数专为嵌套设计，第二个参数是连接符；用 counter() 只会取最内层值。
- 外层
<ol></ol>设counter-reset: chapter; - 内层
<ol></ol>设counter-reset: subitem;（不是复用同一个名） - 否则子级会覆盖父级计数，导致编号错乱
中文前缀（如“第1条”）必须用 content 拼接字符串
list-style-type 不支持插入文字前缀，但 content 可以：content: "第" counter(item) "条";。
- 注意空格：中文和数字间通常不加空格，英文建议加（
"Step " counter(step) ":"） - 如果序号需大写汉字（一、二、三），CSS 无内置转换，得用 JavaScript 或提前写好映射表
- 字体 fallback 要留意：某些字体不支持全角数字或中文标点，可能显示方块
真正容易被忽略的点是：计数器值始终是阿拉伯数字，所有样式化（罗马数字、字母、前缀、后缀）都得靠 content 字符串拼接完成——它不是“格式化函数”，只是把数字当字符串用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
