如何在不修改HTML结构时用CSS计数器为独立div包裹的标题编号

原方案失效的核心原因是：计数器的作用域被限制在单个标题元素内，而每个标题都在独立的div中，导致不同div里的标题无法共享同一个计数器上下文。以下是无需修改HTML结构的解决方案：

修改后的CSS代码（现代浏览器兼容版） #

.wrapper {
  /* 在最外层容器重置所有层级的计数器，初始值设为0 */
  counter-reset: h1-counter 0 h2-counter 0 h3-counter 0;
}

/* 当子div包含h1时，递增h1计数器，同时重置下级的h2、h3计数器 */
.wrapper > div:has(h1.numbered) {
  counter-increment: h1-counter;
  counter-reset: h2-counter 0 h3-counter 0;
}

/* 当子div包含h2时，递增h2计数器，同时重置下级的h3计数器 */
.wrapper > div:has(h2.numbered) {
  counter-increment: h2-counter;
  counter-reset: h3-counter 0;
}

/* 为h1添加编号前缀 */
h1.numbered::before {
  content: counter(h1-counter) " ";
  margin-right: 8px;
}

/* 为h2添加层级编号前缀 */
h2.numbered::before {
  content: counter(h1-counter) "." counter(h2-counter) " ";
  margin-right: 8px;
}

原理说明 #

1. 将所有计数器的作用域绑定到最外层的.wrapper容器，确保所有标题共享同一套计数器上下文。
2. 使用:has()选择器检测每个子div内的标题级别，在div层面触发计数器的递增和重置操作，规避标题元素自身的作用域限制。
3. 伪元素直接读取.wrapper容器中的计数器值，生成正确的层级编号。

旧版浏览器兼容方案（无需:has()） #

如果需要兼容不支持:has()的旧浏览器，可改用兄弟选择器组合实现：

.wrapper {
  counter-reset: h1-counter 0 h2-counter 0;
}

/* 第一个h1，或前面是h2的h1：递增h1计数器并重置h2 */
.wrapper > div:not(:has(h1) ~ :has(h1)):has(h1.numbered),
.wrapper > div:has(h2.numbered) ~ :has(h1.numbered) {
  counter-increment: h1-counter;
  counter-reset: h2-counter 0;
}

/* 前面是h1或h2的h2：递增h2计数器 */
.wrapper > div:has(h1.numbered) ~ :has(h2.numbered),
.wrapper > div:has(h2.numbered) ~ :has(h2.numbered) {
  counter-increment: h2-counter;
}

h1.numbered::before {
  content: counter(h1-counter) " ";
}

h2.numbered::before {
  content: counter(h1-counter) "." counter(h2-counter) " ";
}

该方案通过兄弟选择器的组合判断标题的顺序关系，实现计数器的正确递增和重置。

内容的提问来源于stack exchange，提问作者4r7if3x