出处：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. CSS 中浮动的使用

    float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DO ...

  2. 【笨嘴拙舌WINDOWS】字符类型与字符串

    "我将用C语言作为工具,开始WINDOWS API的使用" windows NT 从底层开始支持unicode. 1.字符类型 WINDOWS的字符类型在WINNT.H和CTYPE ...

  3. UVa 122 (二叉树的层次遍历) Trees on the level

    题意: 输入一颗二叉树,按照(左右左右, 节点的值)的格式.然后从上到下从左到右依次输出各个节点的值,如果一个节点没有赋值或者多次赋值,则输出“not complete” 一.指针方式实现二叉树 首先 ...

  4. python编码问题(1)

    一.字符编码基础 字符编码是计算机对字符的格式化,从而能够在计算机系统中存储与传输. 1.ASCII码 在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态 ...

  5. 【Unity3D】模仿制作“神庙逃亡”吃金币后金币飞出屏幕效果

    [前言] 玩过“神庙逃亡”的应该都知道,这款游戏不论从游戏流畅度.人物动画.场景的管理都很棒. 自己也做了一款简单的跑酷游戏,实现了简单的吃金币效果,但是发现不好看,于是就想模仿“神庙逃亡”中的这个效 ...

  6. android中的所谓观察者模式

    生活中我们常认定某些人很有才,但什么是有才呢?明朝的王守仁曾这样解释:才,是所谓天理,应用到物上,便成了才.凡事凡物,只要掌握了所谓科学的方法,并能灵活运用,那么你也可以成为一个有才的人. 观察者模式 ...

  7. IClassSchemaEdit修改要素类信息

    private void ChangeFeatureClassAliasName(IFeatureClass pFeatureClass, string aliasName) { ISchemaLoc ...

  8. ubuntu eclipse 安装svn

    1.helper->install new software 在弹出的窗口中work with 输入http://subclipse.tigris.org/update_1.6.x 2.下面窗口 ...

  9. [Everyday Mathematics]20150302

    $$\bex |p|<\frac{1}{2}\ra \int_0^\infty \sex{\frac{x^p-x^{-p}}{1-x}}^2\rd x =2(1-2p\pi \cot 2p\pi ...

  10. Web通信之：长轮询（long-polling）(转)

    Web通信之:长轮询(long-polling) “轮询”是个耐人寻味的词,第一次看到它的时候我就直接理解为“轮流查询”了.但是看到了英文才知道这个是网络通信专业的术语.轮询,其实就是一群人在排队买东 ...