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中文网其他相关文章！