CSS 的 `counter-reset` 和 `counter-increment` 构成了强大而轻量的纯CSS自动编号机制，无需JavaScript即可实现章节、列表、嵌套标题（如1.1、2.3）等动态序号生成；其中 `counter-reset` 负责在父容器中声明并初始化计数器（决定作用域与起始值），`counter-increment` 则在匹配元素上触发递增，二者名称必须严格一致且层级关系正确，再配合 `::before/::after` 伪元素与 `counter()` 或 `counters()` 函数即可灵活输出格式化编号——掌握这一机制，不仅能大幅提升语义化文档的排版效率，还能避免常见“编号不显示”“重复”“错位”等陷阱，是现代CSS中被严重低估却极具实用价值的核心技巧。

counter-reset 和 counter-increment 是什么关系

它们是 CSS 计数器机制的两个基础属性，counter-reset 用来「声明并初始化」一个计数器（比如设为 0），counter-increment 用来「每次匹配到元素时给它加 1」。没有 counter-reset，counter-increment 就会报无效——浏览器根本不知道这个计数器从哪来。

常见误区是以为只要写 counter-increment: section; 就能自动编号，结果发现没反应。原因几乎总是漏了 counter-reset，或者它没作用在合适的父容器上。

怎么让 h2 标题自动编号（如 1.、2.、3.）

关键不是给 h2 自己设 counter-reset，而是给它的**最近公共父容器**（比如 article 或 body）设 counter-reset: section;，再让每个 h2 执行 counter-increment: section;，最后用 content: counter(section) ". " 插入编号。

• counter-reset: section; 写在 article 上，表示“在这个 article 里，section 计数器从 0 开始”
• h2 { counter-increment: section; } 表示“每遇到一个 h2，section 加 1”
• h2::before { content: counter(section) ". "; } 把当前值拼成前缀

如果页面有多个 article，每个都会独立计数，互不影响——这是 counter-reset 作用域决定的。

嵌套编号（如 1.1、1.2、2.1）怎么写

靠多级计数器 + counter() 的第二个参数。比如 h2 用 section，h3 用 subsection，并在 h3 的 counter-reset 中绑定上级： counter-reset: subsection; 放在 h2 上，而不是全局。

这样每个 h2 都会重置自己的 subsection，h3 每次只在对应 h2 下累加。显示时用 counter(section) 和 counter(subsection) 拼接，或直接用 counters(subsection, ".") 自动生成带点分隔的嵌套格式。

• h2 { counter-increment: section; counter-reset: subsection; }
• h3 { counter-increment: subsection; }
• h3::before { content: counter(section) "." counter(subsection) " "; }

注意：counters() 第二个参数必须是字符串字面量，比如 "."，不能是变量或 CSS 变量，否则不生效。

为什么编号没更新或重复了

最常踩的坑是 DOM 结构和 CSS 选择器没对齐。比如把 counter-reset 写在 div.content 上，但实际 h2 在 div.content > section > h2 里，而中间的 section 没有继承或重置行为，就可能打断计数流。

• 检查浏览器开发者工具的「Computed」面板，确认目标元素是否真的计算出了 counter-increment 值
• counter-reset 的值如果是 none 或未声明，子元素的 counter-increment 会被忽略
• 用 display: none 隐藏的元素仍参与计数；用 visibility: hidden 则照常计数
• 动态插入的元素（JS 添加）需要确保其父容器已有 counter-reset，否则新元素不会触发初始计数

计数器是纯 CSS 运行时行为，不依赖 JS，但也不感知 DOM 变化事件——它只按渲染树顺序逐个应用规则。结构一乱，编号就容易错位。

今天关于《HTML中使用CSS的counter-reset和counter-increment可以实现自动编号，常用于生成章节、列表项等编号。以下是一个简单的示例说明如何实现：1. 使用 counter-reset 重置计数器counter-reset 用于在某个元素上初始化一个计数器。2. 使用 counter-increment 增加计数器counter-increment 用于在每个匹配的元素上增加计数器的值。3. 使用 content 和 counter() 函数显示编号通过伪元素（如 ::before 或 ::after）配合 content 属性，结合 counter() 函数来显示编号。示例：自动编号的标题

第一章

》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！