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

时间:2024-01-02 20:37:08

出处: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. <body>
  16. <h2>大标题</h2>
  17. <p>子标题</p>
  18. <p>子标题</p>
  19. <p>子标题</p>
  20. <h2>大标题</h2>
  21. <p>子标题</p>
  22. <p>子标题</p>
  23. <h2>大标题</h2>
  24. <p>子标题</p>
  25. <p>子标题</p>
  26. <p>子标题</p>
  27. </body>
  28. </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. <body>
  16. <h2>大标题</h2>
  17. <p>子标题</p>
  18. <p>子标题</p>
  19. <p>子标题</p>
  20. <h2>大标题</h2>
  21. <p>子标题</p>
  22. <p>子标题</p>
  23. <h2>大标题</h2>
  24. <p>子标题</p>
  25. <p>子标题</p>
  26. <p>子标题</p>
  27. </body>
  28. </html>