出处：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. JSON 之 SuperObject(4): 增、删、改

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  2. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  3. Bootstrap_CSS全局样式

    一.HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTY ...

  4. UVa 297 (四分树 递归) Quadtrees

    题意: 有一个32×32像素的黑白图片,用四分树来表示.树的四个节点从左到右分别对应右上.左上.左下.右下的四个小正方区域.然后用递归的形式给出一个字符串代表一个图像,f(full)代表该节点是黑色的 ...

  5. Scala List

    1 介绍 Scala中列表List类似于数组,List所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,这意味着一个列表的元素可以不被分配来改变. 第二,列表表示一个链表,而数组平 ...

  6. （六）6.9 Neurons Networks softmax regression

    SoftMax回归模型,是logistic回归在多分类问题的推广,即现在logistic回归数据中的标签y不止有0-1两个值,而是可以取k个值,softmax回归对诸如MNIST手写识别库等分类很有用 ...

  7. （五）用正则化(Regularization)来解决过拟合

    1 过拟合 过拟合就是训练模型的过程中,模型过度拟合训练数据,而不能很好的泛化到测试数据集上.出现over-fitting的原因是多方面的: 1) 训练数据过少,数据量与数据噪声是成反比的,少量数据导 ...

  8. 【英语】Bingo口语笔记(47) - 关于马的表达

    beat a dead horse 浪费口舌

  9. 最冤枉的关键字----sizeof

    <h4>一.常年被人误认为函数.</h4> sizeof 是关键字不是函数,其实就算不知道它是否为32 个关键字之一时,我们也可以借助编译器确定它的身份.看下面的例子: int ...

  10. Cadence Allegro导网表的错误问题解决

    在Allegro导入网表的时候,有时候会出现这样一个错误问题,如下: ------ Oversights/Warnings/Errors ------ #1   ERROR(SPMHNI-235): ...