CSS计数器：给列表自动增加序号【2】

       

        如上图的多层嵌套的列表本质上还是单层列表的组合。再复杂的层级，都是由一个个父子关系的双层层级组成的。只要每一个最基本的父子关系层级不乱，组成的更复杂的结构就不会乱，层级关系不乱，样式就可以自动给每行文字添加正确的序号(ie6\7不支持相关样式)

        需要在嵌套结构中添加自增序号的样式有一点变化，原来用counter方法，现在要用counters方法，第一个参数是计数器名称，第二个参数是间隔符号。其他和《在CSS计数器：给列表自动增加序号【1】》中介绍的单层列表的自增序号的自动添加方法一样。

代码如下：

<style>
ul{counter-reset:num;padding-left:20px;}
li:before{content:counters(num,'.') '.';counter-increment:num;}
</style>

<ul>
    <li>王老大</li>
    <li>王老二
	<ul>
	    <li>王老二大儿子</li>
	    <li>王老二二儿子</li>
	    <li>王老二三儿子
	        <ul>
                    <li>王老二三儿子的大孙子</li>
                    <li>王老二三儿子的二孙子</li>
                    <li>王老二三儿子的三孙子</li>
		    </ul>
	    </li>
	</ul>
    </li>
    <li>王老三
	<ul>
	    <li>王老三大儿子</li>
	    <li>王老三二儿子</li>
	    <li>王老三三儿子
	        <ul>
		    <li>王老三三儿子的大孙子</li>
		    <li>王老三三儿子的二孙子</li>
		    <li>王老三三儿子的三孙子</li>
		    </ul>
	    </li>
	</ul>
    </li>
</ul>

        重复本文开始的话：不论多复杂的层级关系，都是由一个个稳定简单的父子关系组成的。构建复杂层级的关键是作为最基本的颗粒的每一个父子关系不能错。保证了结构的正确性，配合专有的样式属性，就能轻松实现复杂目路结构。

        不是必用ul、li来构建这种复杂层级目录，但是用ul、li的结构能更明显的提示我们这种层级关系，让我们少犯错。

        上述ul、li的代码，我们知道ul的子元素只能是li，我们也可以在li中继续嵌套ul、li结构。但是，永远不能让ul和li以兄弟关系站在一起。一个li元素要么做为ul的子元素，要么作为ul的父元素，但绝对不能是兄弟元素，ul和li绝对不能平等。这就是复杂目录结构正确性的关键，ul和li的组合能很好的提示我们这一点，但是假如我们用其他单体元素，如div配合class的方法就很容在构建复杂层级关系是忽略这种关系从而无法得到想要的层级显示。保证了结构的正确性，再配合专有的样式属性counters、counter-increment、counter-reset这些，就能轻松实现复杂目路结构。

参考文章：http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/