首页 > web前端 > css教程 > CSS 如何创建编号如 1.1、1.2、1.3 的嵌套有序列表?

CSS 如何创建编号如 1.1、1.2、1.3 的嵌套有序列表?

Barbara Streisand
发布: 2024-12-16 12:11:15
原创
110 人浏览过

How Can CSS Create Nested Ordered Lists with Numbering Like 1.1, 1.2, 1.3?

带嵌套编号的有序列表

CSS 能否生成显示为 1.1、1.2、1.3 而不是默认的 1、2 的有序列表项,3 个序列?

解决方案使用计数器

要实现此结果,您可以利用 CSS 计数器的功能:

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

上面的样式表为每个

    初始化一个名为 item 的计数器。元素。
  1. 元素被设置为显示为块,并且伪元素 :before 添加到每个
  2. 中。显示计数器值,后跟句点和空格。计数器递增属性为每个
  3. 递增计数器。

    示例

    <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,此 HTML 将根据需要呈现具有嵌套编号的列表项:

      1. 离元素
      2. 1.1。子李元素
      3. 1.2。子李元素
      4. 1.3。子里元素
      1. 里元素
      1. 里元素
      2. 3.1 。子里元素
      3. 3.2。子里元素
      4. 3.3。子李元素

以上是CSS 如何创建编号如 1.1、1.2、1.3 的嵌套有序列表?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板