首页 > 文章 > 前端

CSS计数器实现子元素编号技巧

时间：2026-01-25 19:36:41 426浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《CSS计数器实现子元素自动编号方法》，涉及到，有需要的可以收藏一下

如何使用 CSS 计数器为每个子元素自动添加递增序号

通过 `counter-reset` 和 `counter-increment` 配合 `::before` 伪元素，可为每组独立容器内的子元素生成从 1 开始的连续编号，且各容器间互不影响。

CSS 计数器（CSS Counters）是 CSS 中一种轻量、声明式的计数机制，无需 JavaScript 即可实现自动编号。其核心在于三个关键属性：counter-reset（初始化计数器）、counter-increment（递增计数器）和 counter() 函数（在 content 中显示值）。

要实现每组

内部的子

显示 1., 2., 3. 等前缀，需遵循“按容器重置、按子项递增”原则：

在每个容器（如 .container）上设置 counter-reset: section，表示为该容器创建并重置名为 section 的计数器（初始值为 0）；
对每个目标子元素（如 .container > div）应用 counter-increment: section，使其每次出现时计数器加 1；
利用 ::before 伪元素的 content 属性插入 counter(section) ". "，即可渲染出 1., 2. 等格式。

✅ 正确示例代码如下：

.container {
  counter-reset: section; /* 每个.container独立重置计数器 */
}

.container > div::before {
  counter-increment: section; /* 每个直接子div使计数器+1 */
  content: counter(section) ". "; /* 显示"1. ", "2. "等 */
  font-weight: bold; /* 可选：增强可读性 */
}

对应 HTML 结构（注意添加 class="container"）：

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

<div class="container">
  <div>Tiger</div>
  <div>Monkey</div>
  <div>Fox</div>
</div>

⚠️ 注意事项：

不可直接用选择器名作为计数器名（如 counter("div > div") 是非法语法），计数器名必须是合法标识符（如 section, item, list），且区分大小写；
counter-reset 应作用于容器元素（父级），而非子元素；若遗漏此步，计数器将沿继承链延续，导致跨容器累加；
使用 > div 而非 div 可避免嵌套子元素被意外编号（保持层级精确性）；
如需多级编号（如 1.1, 1.2），可配合 counters() 函数与嵌套 counter-reset 实现。

总结：CSS 计数器是语义化、高性能的编号方案，特别适合目录、步骤列表、文档章节等场景。只要牢记「先重置、再递增、后显示」三步逻辑，并为每组独立序列分配专属容器，即可稳定、可维护地实现自动索引。

以上就是《CSS计数器实现子元素编号技巧》的详细内容，更多关于的资料请关注golang学习网公众号！

前往漫画官网入口并下载 ➜