在html中加入序号,CSS3内容处理-插入连续的序号

如果我们想要实现如下图的这种列表，无疑最先想到的是ol标签，通过CSS定义list-style-type: decimal-leading-zero;即可；

但是它有的时候并不能满足我们的需求，比如一篇文章中有好几个大标题，每个标题前面均有连续的编号(可以理解为标签无规律)，我们将如何实现？

据咱们现在所掌握的知识，有以下几种方案：

1.还是用ol，然后对有大标题的地方加入class？

但这样看上去并不是那么的优雅，而且大标题用h标签是比较好的选择；

2.人工去加入编号？

但这样又显得非常麻烦；

3.后台程序在输出的时候加入编号？

但这样多多少少会给服务器端带来压力，而且对编号方式(比如单数前加补零01,02....10)进行修改的时候又得由后端修改其算法，维护成本可能比较高；

从而可以看出，虽有解决办法，但基本都不是那么的“优雅完美”！随着时代的发展，互联网的进步，HTML5/CSS的诞生让我们可以轻易地解决以上问题！

完美的解决方案CSS3！

同样我们还是得使用content属性来实现编号，代码如下：元素{counter-increment:定义计数器名;}/*首先定义一个计数器的名字，名字可随便起，就像js中定义变量一样*/

元素:before{content:counter(引用计数器名);}/*在此处引用计数器，然后将其计数器插入即可实现连续编号*/

现在我们来看一下完整的代码html>

CSS3内容处理-插入连续编号 | 霍者博客(huozheweb.com)！

*{margin:0; padding:0;}

body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}

h2{counter-increment:myCounter;}

h2:before{content:counter(myCounter);}

大标题：霍者博客(huozheweb.com)！

霍者博客是一个值得收藏的网站.

大标题：霍者博客(huozheweb.com)！

霍者博客是一个值得收藏的网站.

大标题：霍者博客(huozheweb.com)！

霍者博客是一个值得收藏的网站.

大标题：霍者博客(huozheweb.com)！

霍者博客是一个值得收藏的网站.

大标题：霍者博客(huozheweb.com)！

霍者博客是一个值得收藏的网站.

代码效果如下：

继续阅读：CSS3

原创文章请注明转载自霍者博客本文地址：http://www.huozheweb.com/post/708.html，标题：CSS3内容处理-插入连续的序号