CSS 中使用 counter 实现多级编号系统（主编号 + 子编号）-html教程-PHP中文网

CSS 中使用 counter 实现多级编号系统（主编号 + 子编号）

本文详解如何用 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) 组合输出。

以下是修正后的完整可运行代码：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

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;
}

  <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>

⚠️ 注意事项与最佳实践

不要写 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 重复：示例中两个违反 HTML 唯一性规范，建议改用 class。