HTML中如何实现纯CSS的计数器自动编号-html教程-PHP中文网

纯css计数器需counter-reset与counter-increment成对使用：前者初始化计数器（如counter-reset: section），后者触发自增（如counter-increment: section）；编号须通过::before/::after的content: counter(section)显示，支持格式化与counters()嵌套。

html中如何实现纯css的计数器自动编号

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

纯 CSS 计数器不依赖 JS，核心靠两个声明配合：counter-reset 初始化计数器（可设起始值），counter-increment 在匹配元素上触发自增。二者必须成对出现，且作用域要覆盖到目标元素。

常见错误是只写 counter-increment 却忘了在父容器或自身加 counter-reset，结果编号全为 0 或不显示。

counter-reset: section; —— 在 <ol></ol> 或 <article></article> 上声明，让子项能继承计数上下文
counter-increment: section; —— 放在要编号的元素（如 <h2></h2>）上，每次匹配就 +1
支持偏移量：counter-increment: section 2; 表示每次加 2
可同时管理多个计数器：counter-reset: section figure;

`::before` 里用 `content: counter()` 显示编号

编号本身不会自动渲染，必须通过伪元素的 content 属性“拉出来”。关键点是：只能在 ::before 或 ::after 中使用 counter()，且该伪元素必须依附于已声明 counter-increment 的元素。

典型误操作是把 content: counter(section); 写在父容器上，但父容器没 counter-increment，结果输出空字符串或 0。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

正确写法：h2::before { content: counter(section) ". "; }
支持格式化：counter(section, upper-roman) → I, II, III；counter(section, decimal-leading-zero) → 01, 02
嵌套场景可用 counters()，比如 counters(section, ".") 输出 1.1、1.2

多级标题编号为什么 `counters()` 比手动拼接更可靠

用 counter() 处理多级（如 h2/h3/h4）时，每个层级独立计数，但显示需要父子关联。如果用多个 counter() 手动拼接，容易错位——比如 h3 自增了，但 h2 没变，导致 counter(h2) 还是旧值。

counters() 是专门为此设计的函数，它会按 DOM 嵌套深度自动收集所有同名计数器的当前值，并用指定分隔符连接。

结构要求：h2 设置 counter-reset: subsection;，h3 设置 counter-increment: subsection;
显示 h3 编号：h3::before { content: counters(section, ".") "." counters(subsection, "."); }
注意：第一个参数是计数器名，第二个是分隔符（字符串需加引号），第三个可选格式（如 lower-alpha）
不支持跨父级跳级，比如 h2 下直接放 h4，h4 不会继承 h3 的计数上下文