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