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

• 在每个容器（如 .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学习网公众号！