若要顯示如 1.2.1 這樣的完整章節路徑，請巢狀排列有序清單，並使用 CSS counters() 串接各層級。本教學會在 Mac 上建立本機 HTML 檔案、保留大綱順序，並說明編輯後如何檢查編號。

完整路徑編號如何運作？

完整的章節路徑會記錄項目在每個層級中的位置。例如，1.2.1 表示第一個頂層項目之下第二個子項目中的第一個項目。CSS 提供了專門用來組合巢狀計數器值的 counters()，會從最外層計數器讀到最內層，並插入你選擇的分隔符。MDN：counters() CSS 函式

在這項工作中，大綱是包含巢狀分支的有序清單，而不是為文件其他位置的標題自動產生的目錄。HTML 會依照樹狀順序定義有序清單的項目，因此原始碼順序應與預期的閱讀順序一致。HTML 標準：ol 元素

這個範例使用三條規則：在每個相關清單上建立計數器、為每個項目遞增計數器，並在項目標籤前顯示組合後的路徑。這採用 MDN 記載的巢狀計數器模式，並將選取器限定在這份大綱內。MDN：使用 CSS 計數器

在 Mac 上建立大綱檔案

你需要 TextEdit 和 Safari 等瀏覽器。完整範例包含自己的樣式表和合成範例內容，不需要任何套件、建置工具或 JavaScript。

  1. 開啟 TextEdit，選擇 File > New。
  2. 選擇 Format > Make Plain Text。
  3. 貼上以下完整範例。
  4. 選擇 File > Save，將檔案命名為 outline.html，並儲存到方便的位置，例如桌面。
  5. 如果 TextEdit 詢問要使用哪個副檔名，請選擇 Use .html。

Apple 說明了如何在 TextEdit 中以純文字工作流程建立 HTML 檔案。Apple：在 Mac 上使用 TextEdit 處理 HTML 文件

以下是完整文件。複製程式碼區塊的內容，但不要包含 Markdown 圍欄行。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

開啟 Safari，然後將 outline.html 從 Finder 拖曳到 Safari 視窗。使用 TextEdit 編輯原始碼，並用 Safari 檢視呈現後的大綱。每次編輯後，請儲存檔案並重新載入瀏覽器頁面。

讓 TextEdit 保持在程式碼編輯模式

重新開啟檔案時，你可能會看到格式化內容，而不是原始碼。Apple 說明了兩種做法：使用 File > Open，點選 Show Options，並選取 Ignore rich text commands；或是在 TextEdit > Settings > Open and Save 下啟用 Display HTML files as HTML code instead of formatted text。Apple：在 Mac 上使用 TextEdit 處理 HTML 文件

對照範例檢查完整路徑

以下是預期顯示的大綱。標籤是中性的佔位文字；項目的位置決定其編號。

1 節點 A
  1.1 節點 B
  1.2 節點 C
    1.2.1 節點 D
    1.2.2 節點 E
  1.3 節點 F
2 節點 G
  2.1 節點 H
3 節點 I

這個範例會檢查三種不同的層級轉換。節點 D 在節點 C 之下開始第三層。該分支結束後，節點 F 回到第二層。節點 G 回到頂層，而它的第一個子項從 2.1 開始。對範例樹狀結構進行確定性遍歷後，確認了這些預期路徑；準備期間並未在瀏覽器中呈現此範例。

每條 CSS 規則的作用

重設規則同時套用在 .outline 和 .outline ol 上。每個巢狀清單都需要一個新的 outline-section 實例；若只重設外層清單，就無法為每個深度建立個別計數。每個清單項目上的遞增規則會讓目前的實例加一。MDN：使用 CSS 計數器

顯示規則使用 counters(outline-section, ".")。這個複數形式的函式會收集所有名稱相同且目前作用中的實例。若改用單數形式的 counter(outline-section)，只會顯示目前層級的值，巢狀項目就會標記為 1，而非完整路徑。MDN：counters() CSS 函式

範例會移除原生清單標記，因為它會自行提供前綴。每個清單也都加上 role="list"：MDN 說明，否則 Safari 可能會將套用 list-style-type: none 樣式的清單從無障礙樹中省略。新增其他巢狀清單時，請保留這個屬性。MDN：list-style-type CSS 屬性

編輯大綱而不破壞其結構

將每個巢狀 <ol> 放在負責該分支的 <li> 內。例如，節點 C 的子清單位於節點 C 的結尾 </li> 之前。巢狀清單不能是另一個有序清單的直接子項。MDN：HTML 有序清單元素

若要進行實際編輯測試，請在節點 C 之前立即新增一個項目。新項目的路徑應為 1.2；節點 C 應變成 1.3；節點 D 和節點 E 則應變成 1.3.1 和 1.3.2。節點 G 應維持為 2。這些預期變化是根據範例的階層結構推得，可用來檢查編號是否依照分支結構更新。

若要移動分支，請移動整個所屬清單項目，包括其巢狀清單和結尾標籤。只移動標籤會讓子項留在原處。若要建立第四層，請在適當項目內重複現有的巢狀清單結構；不要在標籤中手動輸入額外編號。

如果同一分支的子項應構成一段連續序列，請只保留一個子清單。在此實作中，建立另一個同層子清單會產生另一個重設，因此其局部編號會重新開始。MDN 的範例展示了同一項目下的不同巢狀清單會如何重新起算。MDN：使用 CSS 計數器

按照有效順序診斷編號錯誤

先檢查結構，再檢查計數器規則，最後檢查呈現方式。調整縮排無法修正缺少的巢狀層級。

顯示情況 檢查項目 此範例的修正方式
每個巢狀項目都只顯示一個數字 content 中的函式 使用複數形式 counters()，並以句點分隔。
每個同層項目都從 1 開始 重設選取器 在清單上重設，而不是在每個項目上重設。
完整路徑旁邊還出現原生編號 清單樣式規則 將 list-style-type: none 套用到外層和巢狀清單。
某個分支的前綴不如預期 巢狀清單的位置 將子清單留在所屬項目內。
其他位置的清單也出現前綴 計數器選取器範圍 在規則中保留 .outline 前綴。

也請檢查是否有項目被隱藏。CSS 計數器運算不會在不產生盒子的元素上執行，包括設定了 display: none 的元素。相較之下，visibility: hidden 仍會產生盒子，因此可能影響計數。請審慎決定省略的項目是否應占用一個位置。W3C：不產生盒子的元素中的計數器

自訂起始編號該怎麼處理？

此範例刻意使用從零開始並遞增至一的自訂計數器。start、reversed 這類 HTML 屬性，以及清單項目的 value，會控制原生有序清單的編號；此處顯示的自訂 outline-section 規則不會讀取這些屬性。因此，單獨加入 start="4" 並不會讓此範例顯示的前綴從 4 開始。HTML 標準：有序清單與清單項目

如果你需要不連續的編號或遞減的分支，請先確認此需求，再調整樣式表。請讓顯示的路徑與預期的有序清單值一致，避免加入自訂顯示規則會忽略的屬性。

判斷編號屬於呈現方式還是文件內容

本教學中的前綴是由 CSS 產生的內容。它們適合用於視覺大綱，但重要參照資訊需要額外考量：MDN 指出，透過 ::before 加入的內容無法確保螢幕閱讀器都能讀取。加入 role="list" 可以保留清單辨識資訊，但無法保證每個產生的路徑都會被讀出。MDN：::before CSS 偽元素

如果完整路徑必須成為實際文字的一部分，例如純文字匯出內容，請將其作為文字放入文件，或在匯出步驟中產生。這會改變維護方式：編輯文件時也必須更新儲存的路徑。不要依賴視覺前綴在所有輸出格式中提供重要文字。

若要建立本機視覺大綱，最後請檢查範例中的九條路徑、插入一個同層項目，並確認受影響的分支如預期重新編號。在瀏覽器中通過這些檢查後，再替換合成標籤，同時保留巢狀結構和原始碼順序。

來源