在之前的文章【css计数器（counter）是什么】中大家容易介绍了css计数器的有关属性，与通过代码实例来容易知道了一下css计数器的用，本篇文章大家就来具体看看css计数器是怎么样设置和用的，怎么样达成元素自动编号的。【有关视频课程推荐：CSS3课程】

　　1、设置和用css计数器，达成容易的元素编号

　　为了创建和用CSS计数器，遵循以下步骤：

　　1、设置计数器的名字并将其重置为大家选择的初始值。这是用counter-reset属性完成的。

　　counter-reset:标识符（计数器的名字）<整数>（起始值,可选，默认值为0）;

　　初始化计数器（指定起始值）是可选的,假如没指定一个确切的值，它将会从零开始，则此时的计数器达成的内会从‘1’开始。

　　counter-reset属性是在要编号的元素的祖先或兄弟元素上设置的。比如，假如在文章中对标题进行编号，则可以在这类标题的祖先上设置计数器。

　　article{

　　/*设置一个名为“section”的计数器，并将其初始化为0*/

　　counter-reset：section0;

　　}

　　其背后是什么原因，重置编号元素上的计数器将致使出现具备相同编号的元素。这是由于计数器将被重置为其初始值，然后在显示之前对每一个标题进行递增。

　　2、指定计数器何时递增，与按什么值递增。

　　比如，假如期望计数器在每次出现h2标题时递增，那样将可以指定；这是用counter-increment属性完成的。大家可以选择对每一个出现的要编号的元素（本例中为h2）递增计数器的任何值。默认状况下，计数器将递增1；大家还可以用负值，如此计数器将递减。

　　h2{

　　/*在每次出现h2时用“section”计数器，并每次出现就增加1（默认值）*/

　　counter-increment：section1;

　　}

　　这里应该注意的一件要紧事情是：计数器是在显示之前递增，因此假如大家期望第一个标题从1开始，则应该在计算器中将计数器的counter-reset属性初始值设置为零。

　　3、显示计数器

　　设置计数器并指定何时与应该增加多少后，大家需要显示该计数器。

　　要显示计数器，大家就需要用content属性的counter()函数（或counters()嵌套计数器）作为::before伪元素的值。

　　在大家的示例中，大家是对h2标题进行编号，因此大家将在标题之前显示计数器：

　　h2::before{

　　content：counter（section）;

　　}

　　当然，假如你期望在标题的数字和标题之间添加一些空格和可能的任何其他分隔符，可以通过将分隔符附加到计数器的counter()函数中来实行此操作，用字符串作为值，例：

　　h2::before{

　　/*在数字之后加一个点，后面加上空格*/

　　content:counter(my-counter)".";

　　}

　　下面我来来看看示例：

　　html代码：

　　<h2>css计数器的用</h2>

　　<p>css计数器的用css计数器的用css计数器的用css计数器的用css计数器的用</p>

　　<h2>css计数器的用</h2>

　　<p>css计数器的用css计数器的用css计数器的用css计数器的用css计数器的用</p>

　　css代码：

　　body{

　　counter-reset:section;

　　}

　　h2:before{

　　counter-increment:section;

　　content:counter(section)".";

　　}


本文转载自中文网

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！