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

发布于10月02日

所以我试着在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: '';
    }

推荐答案

我认为目前仅使用css是不可能实现通用解决方案的:如果层次 struct 中已经有一个具有<name>的计数器，则counter-reset: <name>将创建一个嵌套计数器.并且没有办法访问父计数器，或对父计数器进行"取消嵌套".你需要一个不同名字的计数器才能达到你的结果.

因此，我认为您需要在两个次优解决方案中进行 Select :

在JS中实施
最多只能支持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个级别，因此您可能能够摆脱硬编码的解决方案.