html - 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

只需注意您的标记(ol 中只有 li)- 子列表可以是这样的:

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

请看下面的演示:

ol {
  counter-reset: item
}

li {
  display: block
}

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

<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>