如何使用 CSS 計數器建立十進制編號的有序列表？

使用十進制數字和CSS對列表進行排序

在有序列表中，您可能會遇到需要以特定格式顯示數字的需求，例如1.1、 1.2、1.3 ，而不是預設的1, 2, 3 序列。當使用 list-style-type:decimal 時，僅按順序對列表項目進行編號，它是使用 CSS 計數器可以實現所需的編號格式。

解決方案：使用計數器

計數器可讓您操縱清單項目顯示的數值。以下是建立分層編號系統的CSS 程式碼：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

範例

考慮以下HTML 結構：

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

應用上面的CSS 程式碼，輸出將是：

1. li element
   1.1 sub li element
   1.2 sub li element
   1.3 sub li element
2. li element
3. li element
   3.1 sub li element
   3.2 sub li element
   3.3 sub li element

以上是如何使用 CSS 計數器建立十進制編號的有序列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！