html++从0开始自动递增,css3 伪类content属性实现行号自动递增

正如标题，这也是我最近项目中遇到的需求，这个例子很简单，相信大家都会有很多种方法来实现这一效果。在很早之前，计数器仅存在于ul，ol等元素中，如何想给其他元素增加计数，就只能通过list-style-image，或者background-image来实现。而我的布局结构恰恰没有到ul ol等元素，所以如果是想要给其他元素增加计数效果就只能另想它法，

正好css3增加了counter属性，可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。

虽然很简单，但是用到了css3的counter属性，很久没用这个属性了，正好来回忆一下知识点，做一个笔记，方便日后查看，所谓“温故而知新”大概就是这个意思，我们还是从基础说起。

CSS Counters用到的属性

前面也提到过，使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括：

counter-reset：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。

counter-increment：用来标识计数器与实际相关联的范围。

content：用来生成内容，其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合counter()一起使用。

counter()：该函数用来设置插入计数器的值。

:before、:after或::before、::after：配合content用来生成计数器内容。

要想完全了解或者熟练使用好CSS Counters来创建计数器，就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。

counter-reset

语法规则

counter-reset:[ ? ]+ | none | inherit

取值说明

counter-reset的默认值为none