出处：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. mysql安装图解 mysql图文安装教程(详细说明)

    MySQL5.0版本的安装图解教程是给新手学习的,当前mysql5.0.96是最新的稳定版本. mysql 下载地址 http://www.jb51.net/softs/2193.html 下面的是M ...

  2. 读取Excel文件中的单元格的内容和颜色

    怎样读取Excel文件中的单元格的内容和颜色 先创建一个Excel文件,在A1和A2中随意输入内容,设置A1的字体颜色为红色,A2的背景为黄色.需要 using Excel = Microsoft.O ...

  3. 51nod1294 修改数组

    看题解的...就是将必须要修改的数去掉后求最长的不递减子序列. upper_bound+lower_bound要理解.有时候-1有时候不用是有原因的. #include<cstdio> # ...

  4. 解决android sdk manage打开闪退的解决方法

    在打开android sdk mangage.exe的时候,一闪而过,在eclipse中出现如下提示: [2015-07-20 13:42:23 - SDK Manager] [SDK Manager ...

  5. 工作流Activiti5流程变量 任务变量 setVariables 跟 setVariablesLocal区别

    工作流Activiti5流程变量 任务变量 setVariables 和 setVariablesLocal区别 因为网上的资料比较少.结合源码把相关API写下来. 设置流程级别变量: runtime ...

  6. USACO 2013 Nov Silver Pogo-Cow

    最近因为闲的蛋疼(停课了),所以开始做一些 USACO 的银组题.被完虐啊 TAT 貌似 Pogo-Cow 这题是 2013 Nov Silver 唯一一道可说的题目? Pogo-Cow Descri ...

  7. JavaScript对象 + Browser 对象 + HTML DOM 对象

    JavaScript 对象 Array Boolean Date Math Number String RegExp Global Browser 对象 Window Navigator Screen ...

  8. [转载] 问题解决：FFmpeg视频编解码库，无法解析的外部信号

    在编译FFmpeg相关项目时,可能会出现: error LNK2019: 无法解析的外部符号 "int __cdecl avpicture_fill(struct AVPicture *,u ...

  9. Ruby on Rail 开发入门

    开发一个博客网站,users资源对象和Microposts评论内容 rails generate scaffold user name:string ,email:string 生成user对象的脚手 ...

  10. ulimit 命令

    用途:ulimit用于shell启动进程所占用的资源. 类别:shell内建命令 语法格式:ulimit [-acdfHlmnpsStvw] [size] 参数: -H 设置硬资源限制. -S 设置软 ...