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

zoukankan html css js c++ java

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>
查看全文

相关阅读:
Django Rest Framework
模块化开发
 单文件组件
 在create-react-app创建的React项目应用中配置JQ、Sass
React 生命周期
 React项目的打包
 JS中的事件冒泡和事件捕获
 webpack 入门教程
 如何优雅地使用 VSCode 来编辑 vue 文件？
页面跳转选中对应的导航

原文地址：https://www.cnblogs.com/liweitao/p/3868158.html