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

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

2024-07-14 00:25:19   223人阅读

出处：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每日一练之内容处理-嵌套编号


联系
我们