CSS计数器实现编号系统：子计数器失效问题求助

你的子计数器失效核心问题是把sub-counter的重置放在了每个.second元素上，导致每一个子项都会重新初始化计数器，自然无法实现递增。另外冗余的计数器递增规则也干扰了正常计数逻辑。

修正后的代码 #

CSS 代码 #

body {
  counter-reset: css-counters 0; 
}
.first {
  position: relative;
  left: 90px;
  top: 10px;
  padding: 10px;
  /* 把sub-counter的重置移到父元素.first上，确保每个.first下的子项共用一个计数器 */
  counter-reset: sub-counter 0;
}

.first:before {
  counter-increment: css-counters; 
  content: "Điều " counter(css-counters) " "; 
  position: absolute; 
  left: -60px; 
  top: 0; 
}

.first .second {
  position: relative; 
}

.first .second:before {
  counter-increment: sub-counter; 
  content: counter(css-counters) "." counter(sub-counter) " "; 
  position: absolute; 
  left: -60px;
  top: 0; 
}

HTML 代码（无需修改） #

<body contenteditable="true">
  <div class="first">
    CẤP HẠN MỨC TÍN DỤNG:
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</span>
    </div>
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</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: sub-counter从.second元素移至.first元素：每个.first区块初始化自己的子计数器，其下的.second子项共享该计数器，实现递增。
• 删除冗余的.first .second:first-child和.first .second:not(:first-child)规则：这两条规则要么重复重置计数器，要么无效递增，完全没必要保留。

修改后，主计数器会按.first区块递增，每个.first下的.second子项会以「主计数器值.子计数器值」的格式正确编号。

内容的提问来源于stack exchange，提问作者Lý Cường Thành