本文详解如何用 CSS counter-reset 和 counter-increment 构建嵌套编号体系，重点修复子计数器失效问题——关键在于避免错误设置 counter-increment: sub-counter 0，确保子项正确递增。
本文详解如何用 css counter-reset 和 counter-increment 构建嵌套编号体系，重点修复子计数器失效问题——关键在于避免错误设置 counter-increment: sub-counter 0，确保子项正确递增。
在 CSS 中实现自动编号（如“Điều 1”“Điều 1.1”“Điều 1.2”）无需 JavaScript，纯靠 counter-reset、counter-increment 和 counter() 函数即可完成。但多级计数器易因重置逻辑或增量设置不当而失效——最常见错误是误写 counter-increment: sub-counter 0，这会导致子计数器不递增（等价于 counter-increment: sub-counter 不生效），从而所有子项显示相同编号（如全为 “1.1”）。
✅ 正确实现多级编号的三步核心逻辑
-
顶层计数器（如
css-counters）：在容器（如body或.first父元素）上counter-reset初始化，通过:before伪元素counter-increment并显示； -
子级计数器（如
sub-counter）：在每个子容器（如.second）上声明counter-reset: sub-counter——注意：此处仅重置，不递增； -
子项递增与显示：对每个
.second元素的:before伪元素同时执行counter-increment: sub-counter（必须省略数值0，默认递增 1），再用counter(css-counters) "." counter(sub-counter)组合输出。
以下是修正后的完整可运行代码：
body {
counter-reset: css-counters 0;
}
.first {
position: relative;
padding: 10px;
margin-bottom: 15px;
}
.first:before {
counter-increment: css-counters;
content: "Điều " counter(css-counters) " ";
position: absolute;
left: -60px;
top: 0;
font-weight: bold;
}
.first .second {
counter-reset: sub-counter; /* 重置子计数器（每组 .second 独立计数） */
position: relative;
margin-left: 20px;
padding: 5px 0;
}
/* 关键修复：移除 counter-increment: sub-counter 0 */
/* .first .second:not(:first-child) { ... } —— 此规则完全多余，应删除 */
.first .second:before {
counter-increment: sub-counter; /* ✅ 必须无参数，等价于 +1 */
content: counter(css-counters) "." counter(sub-counter) " ";
position: absolute;
left: -60px;
top: 0;
}<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">Hạn Mức Tín Dụng:</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-increment: sub-counter 0：CSS 中counter-increment: name 0是合法语法，但语义为“增量为 0”，即不改变计数器值；应直接写counter-increment: sub-counter（隐式 +1）； -
counter-reset的作用域：.first .second { counter-reset: sub-counter }表示每个.second元素自身重置子计数器 → 这会导致每个.second都从 1 开始（适合并列子项）。若需跨.first持续计数，请将counter-reset上移至.first，并在.second中统一counter-increment； -
伪元素必须含
content才触发渲染：即使只写content: ""，也要确保:before/:after有内容，否则counter-increment不执行； -
避免 ID 重复：示例中两个
<span id="dieu1_key4"></span>违反 HTML 唯一性规范，建议改用class。
通过以上结构化配置，即可稳定生成符合法律/公文格式的层级编号（如“Điều 1”, “Điều 1.1”, “Điều 2”），兼顾语义清晰与样式解耦，是现代 CSS 自动化排版的重要实践。
