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>
相关阅读:
一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少
 Spring之創建Bean的三種方式
 mybatis單元測試成功，但是起服務測試失敗的原因：mybatis.xml配置錯了！
HTML5 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME c
如何使用mybatis？(包括存储过程，函数，事务)
IDEA 目录和package创建时的命名区别
 G.Greater and Greater
C++ bitset容器用法简单介绍
 C.Cover the Tree
阶乘位数
原文地址：https://www.cnblogs.com/liweitao/p/3868158.html