首页 > 代码库 > CSS3每日一练之内容处理-嵌套编号

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

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

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


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

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之内容处理-嵌套编号 | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.                 body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
  9.                 h2{counter-increment:myCounter;}
  10.                 h2:before{color:#05a; content:counter(myCounter)"、";}
  11.                 p{counter-increment:sub;}
  12.                 p:before{margin-left:20px; content:counter(sub)"、";}
  13.         </style>
  14.     </head>
  15.     
  16.     <body>
  17.         <h2>大标题</h2>
  18.         <p>子标题</p>
  19.         <p>子标题</p>
  20.         <p>子标题</p>
  21.         <h2>大标题</h2>
  22.         <p>子标题</p>
  23.         <p>子标题</p>
  24.         <h2>大标题</h2>
  25.         <p>子标题</p>
  26.         <p>子标题</p>
  27.         <p>子标题</p>
  28.     </body>
  29. </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)"、";}


代码案例:

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之内容处理-嵌套编号 | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.                 body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
  9.                 h2{counter-increment:myCounter; counter-reset:sub;}
  10.                 h2:before{color:#05a; content:counter(myCounter)"、";}
  11.                 p{counter-increment:sub;}
  12.                 p:before{margin-left:20px; content:counter(sub)"、";}
  13.         </style>
  14.     </head>
  15.     
  16.     <body>
  17.         <h2>大标题</h2>
  18.         <p>子标题</p>
  19.         <p>子标题</p>
  20.         <p>子标题</p>
  21.         <h2>大标题</h2>
  22.         <p>子标题</p>
  23.         <p>子标题</p>
  24.         <h2>大标题</h2>
  25.         <p>子标题</p>
  26.         <p>子标题</p>
  27.         <p>子标题</p>
  28.     </body>
  29. </html>

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