如何使用 CSS 建立自訂編號清單（例如 1.1、1.2、1.3）？

使用CSS 在有序列表中自訂編號

有序列表可以設定為顯示數字為1.1、1.2、1.3，而不只是1 , 2, 3?

list-style-type屬性沒有提供子編號的直接控制。但是，有一個使用 CSS 計數器的巧妙解決方案：

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

這種方法為每個列表項目設定一個計數器，該計數器隨著每個巢狀項目而遞增。 counters(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 建立自訂編號清單（例如 1.1、1.2、1.3）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！