CSS嵌套计数器实现：如何在无序列表后重置有序列表计数

问题概述 #

我正在尝试使用CSS嵌套计数器，但不太熟悉具体用法。目前实现的效果如下：

期望达成的效果是：每次出现无序列表后，后续的有序列表计数能重置为1、2、3……，效果如下：

现有代码 #

HTML（修正规范问题：ul的子元素只能是li）

<ul>
  <li>A</li>
  <li>B</li>
  <li>C
    <ol>
      <li>AA</li>
      <li>BB</li>
      <li>CC
        <ol>
          <li>AAA</li>
          <li>BBB</li>
          <li>CCC
            <ul>
              <li>AAAA</li>
              <li>BBBB
                <ol>
                  <li>AAAAA</li>
                  <li>BBBBB</li>
                  <li>CCCCC</li>
                </ol>
              </li>
              <li>CCCC</li>
            </ul>
          </li>
          <li>DDD</li>
        </ol>
      </li>
    </ol>
  </li>
</ul>

原CSS

ol {
    counter-reset: section;
    list-style-type: none;
}

ul {
    counter-reset: section;
}

ol > li {
    counter-increment: section;
}

ol > li::marker {
    content: counters(section, ".") ". ";
    left: -4px;
}

ul > li:before {
    counter-increment: section;
    content: '';
}

问题原因 #

1. HTML结构不规范：ul的直接子元素只能是li，原代码中ul直接嵌套ol，浏览器自动修正后会打乱计数器作用域。
2. 计数器逻辑冗余：ul > li:before中的counter-increment: section完全多余，无序列表不需要操作计数。
3. 重置范围不准确：原代码中ul重置计数器的逻辑未正确作用于内部的ol，导致计数无法按预期重置。

修正后的CSS #

/* 隐藏有序列表默认标记 */
ol {
  list-style-type: none;
}

/* 顶级有序列表初始化计数器 */
ol {
  counter-reset: section;
}

/* ol内部嵌套的ol，初始化子层级计数器 */
ol ol {
  counter-reset: subsection;
}

/* ul内部的ol，重新初始化顶级计数器 */
ul ol {
  counter-reset: section;
}

/* 递增对应层级的计数器 */
ol > li {
  counter-increment: section;
}

ol ol > li {
  counter-increment: subsection;
}

/* 生成嵌套计数标记 */
ol > li::marker {
  content: counters(section, ".") ". ";
}

ol ol > li::marker {
  content: counters(section, ".") "." counters(subsection, ".") ". ";
}

/* ul内部的ol直接使用顶级计数规则 */
ul ol > li::marker {
  content: counters(section, ".") ". ";
}

效果说明 #

修正后，无序列表内部的有序列表会重新从1开始计数，嵌套的有序列表保持层级递进的计数格式，完全符合期望效果。

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