CSS目录 - 嵌套列表后计数器不会重置

Question

我有基于Creating table of contents in html的HTML / CSS目录。但是，如何修复自动编号，以便在嵌套列表后正确重置？

目前的结果：

1 Lorem
2 Ipsum
     2.1 Dolor
     2.2 Sit
           2.2.1 Amet
           2.2.2 Consectetur
2.3 Adipiscing

期望的结果：

1 Lorem
2 Ipsum
     2.1 Dolor
     2.2 Sit
           2.2.1 Amet
           2.2.2 Consectetur
3 Adipiscing

ol {
  counter-reset: item
}

li {
  display: block
}

li:before {
  content: counters(item, ".")" ";
  counter-increment: item
}

<ol>
  <li>Lorem</li>
  <li>Ipsum</li>
  <ol>
    <li>Dolor</li>
    <li>Sit</li>
    <ol>
      <li>Amet</li>
      <li>Consectetur</li>
    </ol>
  </ol>
  <li>Adipiscing</li>
</ol>

Answer 1

只需处理您的标记（li内只有ol） - 子列表可以是这样的：

  <li>Sit
    <ol>
      <li>Amet</li>
      <li>Consectetur</li>
    </ol>
  </li>

见下面的演示：

＆＃13;

＆＃13;

ol {
  counter-reset: item
}

li {
  display: block
}

li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}

＆＃13;

<ol>
  <li>Lorem</li>
  <li>Ipsum
    <ol>
      <li>Dolor</li>
      <li>Sit
        <ol>
          <li>Amet</li>
          <li>Consectetur</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Adipiscing</li>
</ol>

＆＃13;

＆＃13;

＆＃13;