在之前的文章【css计数器（counter）是什么】中我们简朴引见了css计数器的相干属性，以及经由过程代码实例来简朴了解了一下css计数器的运用，本篇文章我们就来细致看看css计数器是怎样设置和运用的，怎样完成元素自动编号的。【相干视频教程引荐：CSS3教程】
一、设置和运用css计数器，完成简朴的元素编号
为了建立和运用CSS计数器，遵照以下步骤：
1、设置计数器的称号并将其重置为我们挑选的初始值。这是运用counter-reset属性完成的。
counter-reset: 标识符（计数器的称号） <整数>（起始值,可选，默许值为0）;
初始化计数器（指定起始值）是可选的, 假如没有指定一个确实的值，它将会从零最先，则此时的计数器完成的内会从‘1’最先。
counter-reset属性是在要编号的元素的先人或兄弟元素上设置的。比方，假如在文章中对题目举行编号，则能够在这些题目的先人上设置计数器。
article {
/ *设置一个名为“section”的计数器，并将其初始化为0 * /
counter-reset：section 0 ;
}
其背地的原因是，重置编号元素上的计数器将致使涌现具有雷同编号的元素。这是由于计数器将被重置为其初始值，然后在显现之前对每一个题目举行递增。
2、指定计数器什么时候递增，以及按什么值递增。
比方，假如愿望计数器在每次涌现h2题目时递增，那末将能够指定；这是运用counter-increment属性完成的。我们能够挑选对每一个涌现的要编号的元素（本例中为h2）递增计数器的任何值。默许情况下，计数器将递增1；我们还能够运用负值，如许计数器将递减。
h2 {
/ *在每次涌现h2时运用“section”计数器，并每次涌现就增添1（默许值）* /
counter-increment：section 1 ;
}
这里须要注重的一件主要事变是：计数器是在显现之前递增，因而假如我们愿望第一个题目从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) ".";
}
结果图：
二、设置嵌套计数器，完成元素的嵌套编号
偶然在一个大题目下面还会有多个2级题目，3级题目，题目一个嵌套一个（如，下图），怎样编号？
下面我们就来引见运用嵌套计数器，来完成元素的嵌套编号的要领。
要完成元素的嵌套编号，最简朴的要领就是运用counters()函数；运用该函数，我们能够在一个声明中设置多个计数器，默许情况下这些计数器将嵌套。
示例引见：我们将运用counters()函数在嵌套列表上设置嵌套计数器。列表（ul，ol）能够嵌套到标记中的几个级别，因而我们能够运用counters()函数。
html代码：
<div class="container">
<ul>
<li> 菜单1
<ul>
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3
<ul>
<li>菜单1.3.1</li>
<li>菜单1.3.2</li>
<li>菜单1.3.3</li>
<li>菜单1.3.4</li>
</ul>
</li>
</ul>
</li>
<li>菜单2
<ul>
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
</ul>
</li>
</ul>
</div>
css代码：
起首我们要建立一个计数器，定义计数器的称号为：nested-counter，初始化值为：0；增量为：1。
ul {
list-style: none;/* 去除ul中默许的款式*/
counter-reset：nested-counter;
}
ul li {
counter-increment：nested-counter;
line-height: 1.6;
}
显现计数器很简朴。我们将运用一个点作为嵌套计数器之间的分隔符，我们将在计数器和列表项中的文本之间增加一个右括号作为分隔符，仅用于变动。
ul li ：before {
/ * counters（）函数内的字符串是两个计数器之间的分隔符，而且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* /
content: counters(nested-counter, ".") ") ";
font-weight: bold;
}
完成结果，看上图。
两个计数器之间的分隔符，能够有许多，如"."、“-”等等。
三、计数器的款式
计数器也是能够设置款式的，不单单议能够用数字来显现编号，还能够是字母（如a，A）,罗马字符（如：ⅰ，ⅱ）等等，只如果css list-style-type属性可用的列表款式范例中的任何一种都能够来设置计数器的款式。在之前的文章【css怎样设置列表款式？列表款式的完成】中有引见，人人能够参考一下。
那末怎样设置？
这就须要设置style参数，我们来看看基础语法：
counter(name，style) counters(name，分隔符，style)
name：计数器称号，style就是款式了。
以下是一切能够的计数器款式：
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
总结：以上就是本篇文章的全部内容，愿望能对人人的进修有所协助。
以上就是css怎样运用计数器给元素自动编号？css计数器的运用（代码示例）的细致内容，更多请关注ki4网别的相干文章！
