首页 >web前端 >css教程 >如何使用 CSS 创建自定义编号列表(例如 1.1、1.2、1.3)?

如何使用 CSS 创建自定义编号列表(例如 1.1、1.2、1.3)?

DDD
DDD原创
2024-12-16 19:44:21457浏览

How Can I Create Custom Numbered Lists (e.g., 1.1, 1.2, 1.3) with CSS?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn