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

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

生成的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及以上版本中表现良好。以上就是关于如何实现嵌套列表带有上级层级序号的全部内容整理，希望对大家在编写文档手册时有所帮助。