CSS table 的内容 - 嵌套列表后计数器不会重置

Question

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

当前结果：

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

只需注意您的标记（ols 中只有 lis）- 子列表可以是这样的：

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

CSS table 的内容 - 嵌套列表后计数器不会重置

CSS table of contents - Counter won't reset after nested lists

html

css

list

pseudo-element