html - CSS 嵌套有序列表计数器操作

Question

我想使用特定数字开始嵌套有序列表，同时保持嵌套列表项的正常编号(基于第一个起始数字)。我不会让人们走上错误的道路并展示我迄今为止尝试过的众多脚本版本，而是要展示我想要的最终状态并询问如何到达那里。

toc.html 这是一个目录，看起来像(使用嵌套的有序列表):

Table of Contents

1 Introduction
2 Assembly
   2.1 Preparation
      2.1.1 Space
      2.1.2 Tools
      2.1.3 Parts
   2.2 Assembly
      2.2.1 Build It
3 Use
   3.1 Defaults
   3.2 Customizations
      3.2.1 Safety
      3.2.1 Insanity
4 Trouble-Shooting
5 Reference

在 assembly.html 页面上，即 2 Assembly 从目录中指向的内容，我希望它看起来像这样:

Blah blah blah, fake latin goes here.

2 Assembly
   2.1 Preparation
      2.1.1 Space
      2.1.2 Tools
      2.1.3 Parts
   2.2 Assembly
      2.2.1 Build It

Body of this page, along with more fake latin, goes here.

在 use.html 上，我希望它看起来像:

Blah blah blah, fake latin goes here.

3 Use
   3.1 Defaults
   3.2 Customizations
      3.2.1 Safety
      3.2.1 Insanity

Body of this page, along with more fake latin, goes here.

如何仅使用 HTML 和 CSS 来实现此目的？我不需要 javascript 或 HTML 和 CSS 以外的任何内容。我的文件结构是:

/css/main.css
/toc.html
/assembly.html
/use.html
/trouble-shooting.html
/reference.html

Answer 1

将 li 元素声明为 block 元素。然后，您可以利用 conter-reset 属性并通过伪元素重新添加计数器:

ol {
  counter-reset: item;
}

li {
  display: block;
}

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

<ol>
  <li>Introduction</li>
  <li>Assembly
    <ol>
      <li>Preparation
        <ol>
          <li>Space</li>
          <li>Tools</li>
          <li>Parts</li>
        </ol>
      </li>
      <li>Assembly
        <ol>
          <li>Build It</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Use
    <ol>
      <li>Defaults</li>
      <li>Customizations
        <ol>
          <li>Safety</li>
          <li>Insanety</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Trouble-Shooting</li>
  <li>Reference</li>
</ol>