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>

时间： 2024-10-22 22:22:01

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

CSS3每日一练之内容处理-嵌套编号的相关文章

CSS3每日一练之选择器-结构性伪类选择器

HTML5每日一练之details展开收缩标签的应用

每日一小练——最长平台问题

每日一小练——列出全部子集

每日一小练——按字典顺序列出所有排列

每日一小练——快速Fibonacci数算法

每日一小练——按字典顺序列出全部子集

每日一小练——求质数

每日一小练——等值首尾和