CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号

网络推广 2025-05-27 03:01www.dzhlxh.cn网络推广竞价

编写文档手册时,我们经常需要让列表项的序号反映出其上级各层的序号,以达到如图一所示的效果。

生成的HTML代码大致如下:

```html

  1. 1. 列表项

    1. 1.1. 列表项

      1. 1.1.1 列表项
      2. 1.1.2 列表项
      3. 1.1.3 列表项

```

如果我们既不想在HTML代码中硬写序号,也不想使用JavaScript,那么我们可以考虑从HTML属性和CSS两个方面寻找解决方案。遗憾的是,HTML元素属性并没有提供类似的接口。幸运的是,CSS提供了一个名为“counter”的概念,可以用来解决这一问题。经过查询相关文档后,我们可以得到相应的CSS解决方案。对于HTML代码部分,我们可以保持原有的结构不变。而CSS部分可以这样写:

对于ol标签,我们设置padding和margin属性以增加列表前的空白区域,同时移除默认的列表样式,并重置计数器。对于每个li标签,我们增加计数器并设置内容显示格式。这样就能实现无论多少层的嵌套列表,都能正确显示级联序号的效果,如图一所示。以下是相应的CSS代码:

```css

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;} /重置计数器/

li:before {counter-increment:a;content:counters(a,".")". ";} /增加计数器并设置内容显示格式/

```这样,无论嵌套多少层级的列表,都能正确显示带有上级层级的序号。值得注意的是,这种方法不支持古老的IE6/IE7浏览器,但在IE8及以上版本中表现良好。以上就是关于如何实现嵌套列表带有上级层级序号的全部内容整理,希望对大家在编写文档手册时有所帮助。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板