本文摘自PHP中文网，作者青灯夜游，侵删。
css如何使用计数器给元素自动编号？本篇文章就给大家介绍设置和使用css计数器的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在之前的文章【css计数器（counter）是什么】中我们简单介绍了css计数器的相关属性，以及通过代码实例来简单了解了一下css计数器的使用，本篇文章我们就来具体看看css计数器是如何设置和使用的，如何实现元素自动编号的。【相关视频教程推荐：CSS3教程】
一、设置和使用css计数器，实现简单的元素编号
为了创建和使用CSS计数器，遵循以下步骤：
1、设置计数器的名称并将其重置为我们选择的初始值。这是使用counter-reset属性完成的。
1 |
|
初始化计数器（指定起始值）是可选的, 如果没有指定一个确切的值，它将会从零开始，则此时的计数器实现的内会从‘1’开始。
counter-reset属性是在要编号的元素的祖先或兄弟元素上设置的。例如，如果在文章中对标题进行编号，则可以在这些标题的祖先上设置计数器。
1 2 3 4 |
|
其背后的原因是，重置编号元素上的计数器将导致出现具有相同编号的元素。这是因为计数器将被重置为其初始值，然后在显示之前对每个标题进行递增。
2、指定计数器何时递增，以及按什么值递增。
例如，如果希望计数器在每次出现h2标题时递增，那么将可以指定；这是使用counter-increment属性完成的。我们可以选择对每个出现的要编号的元素（本例中为h2）递增计数器的任何值。默认情况下，计数器将递增1；我们还可以使用负值，这样计数器将递减。
1 2 3 4 |
|
这里需要注意的一件重要事情是：计数器是在显示之前递增，因此如果我们希望第一个标题从1开始，则应该在计算器中将计数器的counter-reset属性初始值设置为零。
3、显示计数器
设置计数器并指定何时以及应该增加多少后，我们需要显示该计数器。
要显示计数器，我们就需要使用content属性的counter()函数（或counters()嵌套计数器）作为::before伪元素的值。
在我们的示例中，我们是对h2标题进行编号，因此我们将在标题之前显示计数器：
1 2 3 |
|
当然，如果你希望在标题的数字和标题之间添加一些空格和可能的任何其他分隔符，可以通过将分隔符附加到计数器的counter()函数中来执行此操作，使用字符串作为值，例：
1 2 3 4 |
|
下面我来来看看示例：
html代码：
1 2 3 4 5 |
|
css代码：
1 2 3 4 5 6 7 8 |
|
效果图：
二、设置嵌套计数器，实现元素的嵌套编号
有时在一个大标题下面还会有多个2级标题，3级标题，标题一个嵌套一个（如，下图），如何编号？
下面我们就来介绍使用嵌套计数器，来实现元素的嵌套编号的方法。
要实现元素的嵌套编号，最简单的方法就是使用counters()函数；使用该函数，我们可以在一个声明中设置多个计数器，默认情况下这些计数器将嵌套。
示例介绍：我们将使用counters()函数在嵌套列表上设置嵌套计数器。列表（ul，ol）可以嵌套到标记中的几个级别，因此我们可以使用counters()函数。
html代码：
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
