使用 CSS 計數器實現多級編號

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

以上是使用 CSS 計數器的多級編號的示例。它利用了計數器的自巢狀概念。自巢狀是一個概念，如果一個元素已經有一個具有給定名稱的計數器但是必須建立另一個，那麼它將它建立為現有計數器的子元素。在這裡，第二級 ul 已經從其父級繼承 list-item-number 計數器，但隨後必須建立自己的 list-item-number（對於其子級 li），因此建立 list-item-number[1]（第二級計數器）並將其嵌入 list-item-number[0]（第一級計數器）。因此，它實現了多級編號。

使用 counters() 函式而不是 counter() 函式列印輸出，因為 counters() 函式設計為在列印輸出時為所有更高階別計數器（父級）的值新增字首。