CSS:如何在嵌套计数器中有多个计数器

Question

所以我尝试在 CSS 中使用嵌套计数器，但我不太熟悉它是如何工作的，这就是我目前所拥有的，

但我希望发生的是，每次有一个无序列表时，当我开始一个有序列表时，它会重置回 1. 2. 3. 等等，可能与此类似

https://codepen.io/jojonmarijon/pen/OJZZPBK?editors=1100

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <ol>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <ol>
      <li>AAA</li>
      <li>BBB</li>
      <li>CCC</li>
      <ul>
        <li>AAAA</li>
        <li>BBBB</li>
        <ol>
          <li>AAAAA</li>
          <li>BBBBB</li>
          <li>CCCCC</li>
        </ol>
        <li>CCCC</li>
      </ul>
      <li>DDD</li>
    </ol>
  </ol>
</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: '';
    }

Answer 1

我认为目前仅使用 CSS 无法实现通用解决方案:counter-reset: <name>如果已经有 <name> 的计数器，将创建一个嵌套的计数器在层次结构中。并且没有办法访问父级，或者“取消嵌套”父级计数器。您需要一个具有不同名称的计数器才能实现您的结果。

所以我认为您需要在 2 个次优解决方案之间做出选择:

1. 用JS实现
2. 最多只支持 n层次深，对于一些低层次的n .例如。像这样:

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

ol > li {
  counter-increment: section;
}

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

/* Level 1 */

ul ol {
  counter-reset: nested;
}

ul ol > li {
  counter-increment: nested;
}

ul ol > li::marker {
  content: counters(nested, ".") ". ";
}

/* level 2 */

ul ul ol {
  counter-reset: nested2;
}

ul ul ol > li {
  counter-increment: nested2;
}

ul ul ol > li::marker {
  content: counters(nested2, ".") ". ";
}

/* etc. */

另请参阅:https://codepen.io/Tiddo/pen/vYjjRRx?editors=1100

我认为在实践中，您可能最多只需要支持 3-5 层深度，因此您可能能够摆脱硬编码解决方案。