用 counter-reset 自定义有序列表序号的唯一可靠路径是配合 counter-increment 与 ::before 手动接管计数：先在父容器设 counter-reset 定义名称和起始值，子元素设 counter-increment 触发递增，再用 content 拼接前缀、后缀或嵌套格式（如 counters(section, ".")），所有样式化均需字符串拼接完成。

如何用 counter-reset 自定义有序列表序号

直接说结论：原生 <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，结果页面完全不显示数字。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

嵌套列表编号要分层声明计数器

比如“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> 设 counter-reset: chapter;
• 内层 <ol> 设 counter-reset: subitem;（不是复用同一个名）
• 否则子级会覆盖父级计数，导致编号错乱

中文前缀（如“第1条”）必须用 content 拼接字符串

list-style-type 不支持插入文字前缀，但 content 可以：content: "第" counter(item) "条";。

• 注意空格：中文和数字间通常不加空格，英文建议加（"Step " counter(step) ":"）
• 如果序号需大写汉字（一、二、三），CSS 无内置转换，得用 JavaScript 或提前写好映射表
• 字体 fallback 要留意：某些字体不支持全角数字或中文标点，可能显示方块

真正容易被忽略的点是：计数器值始终是阿拉伯数字，所有样式化（罗马数字、字母、前缀、后缀）都得靠 content 字符串拼接完成——它不是“格式化函数”，只是把数字当字符串用。