CSS计数器仅前几个元素正常重置，如何修正层级编号配置？

算力阿峰

2026-9-30

问题根因

你的代码存在3个核心错误导致计数异常：

同级属性覆盖：.headCounter:before 内连续写3次counter-reset，后写的会覆盖前序规则，实际仅生效了CountHead5的重置，CountHead3、CountHead4没有在h2更新时归零
缺少下级计数器重置逻辑：h3、h4层级没有对应重置更低层级的计数器，切换上级标题时下级计数会继承之前的数值
多余的计数递增规则：.head5:before 内额外添加了CountHead3、CountHead4的递增逻辑，会导致h5出现时上级计数被错误累加

修正后的CSS代码

body {
  counter-reset: CountHead2 CountHead3 CountHead4 CountHead5;
}

.headCounter:before {
  counter-increment: CountHead2;
  /* 多个计数器重置写在同一条规则里，空格分隔即可 */
  counter-reset: CountHead3 CountHead4 CountHead5;
  content: counter(CountHead2) '. ';
}

.head3:before {
  counter-increment: CountHead3;
  /* h3更新时重置h4、h5计数 */
  counter-reset: CountHead4 CountHead5;
  content: counter(CountHead2) '.' counter(CountHead3) ' ';
}
.head4:before {
  counter-increment: CountHead4;
  /* h4更新时重置h5计数 */
  counter-reset: CountHead5;
  content: counter(CountHead2) '.' counter(CountHead3) '.' counter(CountHead4) ' ';
}
.head5:before {
  counter-increment: CountHead5;
  /* 删掉多余的上级计数递增规则 */
  content: counter(CountHead2) '.' counter(CountHead3) '.' counter(CountHead4) '.' counter(CountHead5) ' ';
}