CSS 嵌套有序列表計數器操作

Question

我想以特定編號開始嵌套有序列表，同時保持嵌套列表項的編號正常（基於第一個起始編號）。 與其讓人們誤入歧途並展示我迄今為止嘗試過的眾多腳本版本，不如展示我想要的結局 state 並詢問如何到達那里。

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元素聲明為塊元素。 然后你可以利用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>Ins.nety</li> </ol> </li> </ol> </li> <li>Trouble-Shooting</li> <li>Reference</li> </ol>

Answer 2

我希望有某種方法可以嵌套計數器，或者強制計數器只重置初始計數項。 根據@tacoshy的回答，他指出需要像 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 是否允許定位不可見的對象，但我們會看到 [雙關]....

這是我用過的解決方案，它似乎工作得很好。