出处：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>

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

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

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

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

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  3. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  4. 每日一小练——Eratosthenes 筛选法

    上得厅堂.下得厨房,写得代码.翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Eratosthenes筛选法 内容: 求质数是一个非常普遍的问题,通常不外乎用数去除.除到不尽时,给定的数就是质数.可是 ...

  5. 每日一小练——高速Fibonacci数算法

    上得厅堂,下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:高速Fibonacci数算法 内容:先说说Fibonacci数列,它的定义是数列:f1,f2....fn有例如以下规律: ...

  6. WindowsAPI每日一练(1) MessageBoxA

    WindowsAPI每日一练系列 :https://www.cnblogs.com/LexMoon/category/1246238.html WindowsAPI每日一练(1) WinMain 要跟 ...

  7. 每日一小练——Armstrong数

    上得厅堂.下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Armstrong数 内容: 在三位的正整数中,比如abc.有一些能够满足a^3+b^3+c^3=abc的条件,也就是说各 ...

  8. python每日一练：0007题

    第 0007 题: 有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列出来. # -*- coding:utf-8 -*- import os def count ...

  9. [python每日一练]--0012:敏感词过滤 type2

    题目链接:https://github.com/Show-Me-the-Code/show-me-the-code代码github链接:https://github.com/wjsaya/python ...

随机推荐

  1. 对于fmri的设计矩阵构造的一个很直观的解释-by 西南大学xulei教授

    本程序意在解释这样几个问题:完整版代码在本文的最后. 1.实验的设计如何转换成设计矩阵? 2.设计矩阵的每列表示一个刺激条件,如何确定它们? 3.如何根据设计矩阵和每个体素的信号求得该体素对刺激的敏感 ...

  2. Python [Leetcode 342]Power of Four

    题目描述: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Examp ...

  3. 学习java之泛型类和泛型方法

    上一篇博文中我自己试着用了下泛型类,昨天看java编程思想一书,发现里面有这么一段话: 使用参数化方法而不是用参数化类的方便之处在于:你不必为需要应用的每种不同类型都使用一个参数去实例化这个类,并且你 ...

  4. HDU1495 非常可乐

    解题思路:简单的宽搜,见代码: #include<cstdio> #include<cstring> #include<algorithm> #include< ...

  5. 【转】在Source Insight中看Python代码

    原文网址:http://www.cnblogs.com/xuxm2007/archive/2010/09/02/1815695.html SI是个很强大的代码查看修改工具,以前用来看C,C++都是相当 ...

  6. 表单Ext.form.FormPanel(转)

    1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...

  7. library cache lock和cursor: pin S wait on X等待

    1.现象: 客户10.2.0.4 RAC环境,出现大量的library cache lock和cursor: pin S wait on X等待,经分析是由于统计信息收集僵死导致的.数据库在8点到9点 ...

  8. openlayers加载地图没有图片时有红叉的解决方法

    解决方式:设置样式隐藏图片 <style type="text/css"> .olImageLoadError { /*ol2.12 onImageLoadError ...

  9. 多数据源问题--Spring+Ibatis 访问多个数据源（非分布式事务）

    有的时候,我在一个工程中需要访问两个以上的数据源,尤其是在系统集成的时候,以下是我在系统集成的时候遇到的情况,我的工程的架构是:spring2.0+ibatis2.0+struts1.2. 数据库是o ...

  10. Pitcher Rotation

    题意: n个人m个对手给出每个人能战胜每个敌人的概率,现在有g个比赛,每个人赛完后要休息4天(可重复用),求能获得胜利的最大期望个数. 分析: 因为只有每个人5天就能用一次,所以对于每个人来说,只有得 ...