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

CSS3每日一练之内容处理-嵌套编号
出处：http://www.w3cfuns.com/thread-5592229-1-17.html

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

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

<html>

<head>

      <meta charset="gb2312">

      <title>CSS3每日一练之内容处理-嵌套编号 | 前端开发网(W3Cfuns.com)！</title>

      <style type="text/css">

      *{margin:0; padding:0;}

            body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}

            h2{counter-increment:myCounter;}

            h2:before{color:#05a; content:counter(myCounter)"、";}

            p{counter-increment:sub;}

            p:before{margin-left:20px; content:counter(sub)"、";}

      </style>

</head>



<body>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <p>子标题</p>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <p>子标题</p>

</body>

</html>
复制代码
可是这么做真的就正确吗，似乎有些不对劲，所有的子标题会一直往下编号，按道理来讲，在第二个大标题中，子标题应该从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)"、";}

代码案例：
<!DOCTYPE HTML>

<html>

<head>

      <meta charset="gb2312">

      <title>CSS3每日一练之内容处理-嵌套编号 | 前端开发网(W3Cfuns.com)！</title>

      <style type="text/css">

      *{margin:0; padding:0;}

            body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}

            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)"、";}

      </style>

</head>



<body>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <p>子标题</p>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <h2>大标题</h2>

      <p>子标题</p>

      <p>子标题</p>

      <p>子标题</p>

</body>

</html>
相关阅读:
POJ1087 A Plug for UNIX 网络流
 HDU4405 Aeroplane chess 期望DP
POJ1062 昂贵的聘礼区间枚举
 HDU4403 A very hard Aoshu problem 枚举
 HDU4407 Sum 容斥定理
 POJ2750 Potted Flower 线段树+DP
软件项目开发流程以及人员职责
 10款最流行的开源Web设计工具
 C# 把\\r\\n替换为\r\n
jquery validation 用到的输入验证正则表达式
原文地址：https://www.cnblogs.com/liweitao/p/3868158.html