CSS 計數器如何在嵌套有序列表中建立十進位編號？

使用CSS 建立帶有十進制編號的嵌套有序列表

有序列表通常按順序顯示1、2、3 等數字。但是，如何使用 CSS 產生更具體的編號，例如 1.1、1.2、1.3 等？

單獨使用 list-style-type:decimal 只能產生基本數值。若要建立所需的分層編號，可以使用計數器。

以下程式碼片段示範如何使用計數器：

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

這裡有一個範例：

<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.1、1.1.1、1.2、1.3 等數字on，表示列表元素的嵌套層次結構。

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