本文详解如何用 CSS counter-reset 和 counter-increment 构建嵌套编号体系，重点修复子计数器失效问题，并提供可直接运行的结构化代码示例。
本文详解如何用 css counter-reset 和 counter-increment 构建嵌套编号体系，重点修复子计数器失效问题，并提供可直接运行的结构化代码示例。
在 CSS 中实现自动编号（如“Điều 1”、“Điều 1.1”、“Điều 1.2”、“Điều 2”）无需 JavaScript，完全可通过原生 CSS 计数器（CSS Counters）完成。其核心依赖三个声明：counter-reset（初始化计数器）、counter-increment（递增计数器）、counter()（在 content 中显示值）。
但常见错误是子计数器未正确重置与递增——正如示例中 .first .second:not(:first-child) { counter-increment: sub-counter 0; } 这一行：将增量设为 0 会导致计数器不变化，子项始终显示为 1.0 或重复 1.1。
✅ 正确做法是：
- 每个
.first元素作为一级容器，通过counter-increment: css-counters生成主序号； - 每个
.first内部的.second元素需独立重置子计数器（counter-reset: sub-counter），确保每组子项从1开始； - 所有
.second元素（包括首个）都应执行counter-increment: sub-counter（默认步长为1），无需特殊处理:first-child的增量逻辑 ——counter-reset已保证起始值为0，首次increment即得1。
以下是优化后的完整、可运行代码：
立即学习“前端免费学习笔记（深入）”；
body {
counter-reset: css-counters;
}
.first {
position: relative;
padding: 10px;
margin-bottom: 16px;
}
.first:before {
counter-increment: css-counters;
content: "Điều " counter(css-counters) " ";
position: absolute;
left: -70px;
top: 0;
font-weight: bold;
}
.first .second {
counter-reset: sub-counter; /* 每个 .first 下的子组独立计数 */
position: relative;
margin: 8px 0;
}
.first .second:before {
counter-increment: sub-counter; /* 所有 .second 统一递增，无需 :not(:first-child) 特殊规则 */
content: counter(css-counters) "." counter(sub-counter) " ";
position: absolute;
left: -70px;
top: 0;
color: #333;
}<body contenteditable="true">
<div class="first">
CẤP HẠN MỨC TÍN DỤNG:
<div class="second">
<span class="bold">Hạn Mức Tín Dụng:</span>
<span>…</span>
</div>
<div class="second">
<span class="bold">Thời Hạn:</span>
<span>…</span>
</div>
</div>
<div class="first">
CẤP TÍN DỤNG THEO HẠN MỨC TÍN DỤNG
</div>
</body>? 关键注意事项：
-
counter-reset必须作用于父容器（如.first），而非单个.second元素（否则每次重置都会打断连续性）； - 不要对
counter-increment指定0增量，它等价于“不递增”，应省略或明确写为1； - 若需三级编号（如
1.1.1），只需在.second内再嵌套.third，并添加counter-reset: third-counter和对应counter-increment； - 计数器作用域是树形继承关系：子元素可访问父级定义的计数器，但
counter-reset会创建新作用域。
掌握这套模式后，你可轻松构建法律条文、技术文档、考试题纲等专业场景所需的多层级自动编号系统，语义清晰、维护成本低，且完全兼容现代浏览器（Chrome/Firefox/Safari/Edge）。
