HTML列表的高级编号样式自定义（CSS配合）-html教程-PHP中文网

ol的type和start属性不够用，因其仅支持单层预设编号格式、无法自定义前缀/后缀、嵌套不继承父级编号，且html5中已过时；现代方案应使用counter-reset与counter-increment配合伪元素实现可控、可访问、可样式的多级编号。

html列表的高级编号样式自定义（css配合）

为什么`ol`的`type`和`start`不够用

因为它们只能控制单层、预设格式的编号，比如type="A"只能出 A B C，不能变成 “Step A” 或 “→ A”；start="3"只影响起始数字，嵌套子项不会自动变成 3.1、3.2。更麻烦的是，这些属性在 HTML5 中已被标记为过时，现代项目里应避免依赖。

常见错误现象：用<ol type="1" start="5"></ol>想实现“5. 第一步”，结果编号是 5、6、7，文字却还是“第一步”，语义断裂；或者嵌套<ol><ol></ol></ol>后子列表从 1 重新开始，无法继承父级编号。

浏览器对type的支持有限，不支持前缀、图标、括号包裹等设计需求
value属性只能硬编码单个<li>，无法响应式递增或回溯
屏幕阅读器会读出原生编号逻辑，但若靠value或start打乱顺序，可访问性受损

`counter-reset`和`counter-increment`怎么配对用

这是真正可控的编号机制：用counter-reset初始化计数器名称和起始值，用counter-increment让每个<li>自动加 1，再用content: counter(...)把值塞进::before伪元素里。

关键不是“写对语法”，而是层级绑定是否清晰。比如一级列表用section计数器，二级用subsection，且二级必须在counter-reset里重置自身、在counter-increment里同时递增两级：

ol { counter-reset: section; }
ol li { counter-increment: section; }
ol li::before { content: counter(section) ". "; }

ol ol { counter-reset: subsection; }
ol ol li { counter-increment: subsection; }
ol ol li::before { content: counter(section) "." counter(subsection) " "; }

计数器名区分大小写，且不能含空格或特殊符号（如my-counter合法，my counter非法）
counter-reset写在父容器上（如ol），不是li上；否则每次li都会重置，编号全变 1
嵌套时，子ol必须显式counter-reset自己的计数器，否则会沿用父级值并持续累加

怎么用`counter()`函数输出带前缀/后缀的编号

counter()本身只返回数字，但可以和字符串拼接。CSS 的content支持attr()、counter()和纯文本混合，用空格或符号连接即可。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

例如要显示 “✓ Step 1”、“→ Step 2”，不能靠list-style-image——那只是图片，无法动态绑定编号。正确做法是：

ol.step li::before {
  content: "✓ Step " counter(section) " ";
  color: #2a7d4f;
}
ol.arrow li::before {
  content: "→ Step " counter(section) " ";
}

引号内直接写文本，counter(section)插入计算值，中间用空格或标点分隔
若需括号包裹（如“(1)”），写成"(" counter(section) ")"
中文编号（如“一、二、三”）需配合counter(section, cjk-ideographic)，但注意 Safari 对该标识符支持不稳定，生产环境建议 fallback 到数字