CSS计数器：给列表自动增加序号【2】
浏览数：25 /
时间：2015年06月09日
多层嵌套的列表本质上还是单层列表的组合。再复杂的层级，都是由一个个父子关系的双层层级组成的。只要每一个最基本的父子关系层级不乱，组成的更复杂的结构就不会乱。
重点是：
1、上下级关系一定要明确，父子关系就是父子关系，兄弟关系就是兄弟关系。
2、样式的唯一变化是，原来用counter方法，现在要用counters方法，第一个参数是计数器名称，第二个参数是间隔符号。
代码如下：
<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的方法就很容在构建复杂层级关系是忽略这种关系从而无法得到想要的层级显示。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
