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