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

【问题标题】：CSS table of contents - Counter won't reset after nested listsCSS 目录 - 嵌套列表后计数器不会重置
【发布时间】：2017-08-27 17:39:04
【问题描述】：

我有这个基于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>

【问题讨论】：

标签： html css list pseudo-element

【解决方案1】：

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

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

【讨论】：