CSS3每日一练之内容处理-嵌套编号

标签：

出处：http://www.w3cfuns.com/thread-5592229-1-17.html

1、大标题一
　  1、子标题
　  2、子标题
　  3、子标题
2、大标题二
　  1、子标题
　  2、子标题
3、大标题三
　  1、子标题
　  2、子标题
　  3、子标题

这种问题，你可能会觉得直接定义两个计数器，分别编号不就行了，于是就写出了如下代码：

可是这么做真的就正确吗，似乎有些不对劲，所有的子标题会一直往下编号，按道理来讲，在第二个大标题中，子标题应该从1开始计数了。也就是说，我们必须对每个大标题中的子标题的编号进行重置才行！下面我们就来学习一下重置属性。



counter-reset
我们只要在大标题的样式中定义此属性，其值就是子标题的编号名称，于是我们就写出了如下代码：
h2{counter-increment:myCounter; counter-reset:sub;}
h2:before{color:#05a; content:counter(myCounter)"、";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"、";}


代码案例：

CSS3每日一练之内容处理-嵌套编号

标签：

原文地址：http://www.cnblogs.com/liweitao/p/3868158.html