如何使用 CSS 计数器创建十进制编号的有序列表？-css教程-PHP中文网

如何使用 CSS 计数器创建十进制编号的有序列表？

Patricia Arquette

发布： 2024-12-17 02:11:24

原创

844 人浏览过

How to Create Decimal Numbered Ordered Lists with CSS Counters?

使用十进制数字和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中文网其他相关文章！