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

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

本文详解如何用 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。

以下是优化后的完整、可运行代码：

CSS

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

下载

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

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

? 关键注意事项：

counter-reset 必须作用于父容器（如 .first），而非单个 .second 元素（否则每次重置都会打断连续性）；
不要对 counter-increment 指定 0 增量，它等价于“不递增”，应省略或明确写为 1；
若需三级编号（如 1.1.1），只需在 .second 内再嵌套 .third，并添加 counter-reset: third-counter 和对应 counter-increment；
计数器作用域是树形继承关系：子元素可访问父级定义的计数器，但 counter-reset 会创建新作用域。