如何利用HTML制作带有数字序号的列表_通过CSS counter-reset与increment-html教程-PHP中文网

ol无法实现跨容器续编、跳号或伪元素定制编号，而css计数器通过counter-reset和counter-increment成对使用，支持重置、递增、嵌套及多格式输出，自由度更高。

如何利用html制作带有数字序号的列表_通过css counter-reset与increment

为什么 `ol` 不够用，才要上 `counter-reset`

因为 ol 只能生成连续、嵌套层级固定的序号；一旦需要跨容器续编（比如两段 div 接着编号）、跳号（如从 3 开始）、或把序号塞进伪元素里配合图标/装饰，ol 就束手无策了。CSS 计数器本质是变量，可重置、可递增、可嵌套，自由度高得多。

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

必须成对出现才有意义：前者声明计数器名并设初值，后者在目标元素上触发加一。常见错误是只写 counter-increment 却没在父级或根上 counter-reset，结果序号全显示为 0 或不显示。

实操要点：

counter-reset 通常放在列表容器（如 section 或 article）上，值形如 counter-reset: step 0 —— 名字叫 step，起始值是 0（注意不是 1，因为后面 counter-increment 会加一次才显示）
counter-increment 放在要编号的每个子项上，如 .step-item { counter-increment: step; }
用 ::before + content: counter(step) 把数字“印”出来，不能直接写在 HTML 里

怎么让序号带格式，比如 “Step 1”、“第2步”

counter() 函数支持第二个参数指定样式，比手动拼字符串更可靠，也支持本地化。

示例：

Viral Video

一款基于AI的文字转视频创作工具，可将文字创意快速转化为适合社交媒体传播的视频内容和短视频素材。

下载

content: "Step " counter(step);                    /* Step 1, Step 2 */
content: counters(step, ".") " ";                  /* 1.1, 1.2 —— 用于嵌套 */
content: "第" counter(step, decimal) "步";        /* 第1步，第2步 */
content: counter(step, lower-roman) ". ";         /* i. ii. iii. */

注意：decimal 是默认值，可省略；但中文前缀如“第…步”必须显式写 decimal，否则可能被浏览器按 locale 解析成其他进制。

容易被忽略的继承与作用域问题

CSS 计数器不是全局变量，它遵循 CSS 作用域规则：子元素会继承父级的计数器状态，但一旦你在子容器又写了一次 counter-reset，就相当于新建一个同名计数器，和外面的断开。

典型踩坑场景：

在多个 section 里都写 counter-reset: step → 每个 section 都从 1 开始，而非整体延续
想做多级编号（如 1.1、1.2、2.1），却只用了一个计数器名 → 必须用 counter-reset: chapter 0 section 0 + 分层 counter-increment
用 display: none 隐藏了某个 counter-increment 元素 → 它仍会触发递增，序号会“空一格”

真要跳过编号，得用 counter-increment: step 0 显式加 0，而不是靠隐藏。