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

Question

我想以特定编号开始嵌套有序列表，同时保持嵌套列表项的编号正常（基于第一个起始编号）。与其让人们误入歧途并展示我迄今为止尝试过的众多版本的脚本，不如展示我想要的最终状态并询问如何到达那里。

toc.html 是 table 的内容 看起来像（使用嵌套有序列表）：

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 将指向 Table内容，我希望它看起来像这样：

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-elements。然后，您可以通过 pseudo-elements:

使用 conter-reset 属性和 re-add 计数器

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>

Answer 2

我希望有某种方法可以嵌套计数器，或强制计数器仅重置初始计数项。根据的回答，他指出 server-sided 解决方案需要 PHP 才能从数据库调用计数器列表，并且没有其他简单的 HTML 和 CSS 解决方案，我决定只使用垃圾解决方法。当然有更优雅的方法来做到这一点：

我在 CSS 中创建了可以用来隐藏东西的项目。

li.hideme {
   visibility:hidden;
}

#coverup01 {
   position:relative;
   top: -60px;
}

#coverup02 {
   position:relative;
   top: -75px;
}

然后，我对嵌套有序列表使用了基本的 HTML CSS 解决方案，并添加了对上述内容的引用。在 assembly.html 页面上，我这样做了：

<ol>
   <li class="hideme">Introduction</li>
   <span id="coverup01">
      <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>Insanity</li>
               </ol>
            </li>
         </ol>
      </li>
      <li>Trouble-Shooting</li>
      <li>Reference</li>
   </span>
</ol>

在 use.html 页面上我这样做了：

<ol>
   <li class="hideme">Introduction</li>
   <li class="hideme">Assembly</li>
   <span id="coverup02">
      <li>Use
         <ol>
            <li>Defaults</li>
            <li>Customizations
               <ol>
                  <li>Safety</li>
                  <li>Insanity</li>
               </ol>
            </li>
         </ol>
      </li>
      <li>Trouble-Shooting</li>
      <li>Reference</li>
   </span>
</ol>

coverup01 和 coverup02 ID 选择器仅供我自己使用，用于拉出可见列表。如果您希望获得可靠的响应式设计，则需要相应地编辑每个屏幕尺寸。这适用于一个小列表。对于更大的列表，这可能很麻烦。

这返回了我试图查找的结果。我不想使用垃圾代码，但如果没有受支持的解决方案，那么现在必须有一个解决方法。

当我输入这个时...我可以将掩盖的东西放入 li.hideme class，这将大大简化事情。不确定 CSS 是否允许定位不可见的对象，但我们会看到 [双关语]....

这是我用过的解决方案，看起来效果不错。

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

CSS Nested Ordered Lists Counter Manipulation

html

css

menu

html-lists

css-counter