css怎么使用计数器给元素自动编号

本文小编为大家详细介绍“css怎么使用计数器给元素自动编号”，内容详细，步骤清晰，细节处理妥当，希望这篇“css怎么使用计数器给元素自动编号”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　一、设置和使用css计数器，实现简单的元素编号

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

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

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

　　初始化计数器（指定起始值）是可选的,如果没有指定一个确切的值，它将会从零开始，则此时的计数器实现的内会从&lsquo;1&rsquo;开始。

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

　　article{

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

　　counter-reset：section0;

　　}

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

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

　　例如，如果希望计数器在每次出现h3标题时递增，那么将可以指定；这是使用counter-increment属性完成的。我们可以选择对每个出现的要编号的元素（本例中为h3）递增计数器的任何值。默认情况下，计数器将递增1；我们还可以使用负值，这样计数器将递减。

　　h3{

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

　　counter-increment：section1;

　　}

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

　　3、显示计数器

　　设置计数器并指定何时以及应该增加多少后，我们需要显示该计数器。

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

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

　　h3::before{

　　content：counter（section）;

　　}

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

　　h3::before{

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

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

　　}

　　下面我来来看看示例：

　　html代码：

　　<h3>css计数器的使用</h3>

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

　　<h3>css计数器的使用</h3>

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

　　css代码：

　　body{

　　counter-reset:section;

　　}

　　h3:before{

　　counter-increment:section;

　　content:counter(section)".";

　　}

读到这里，这篇“css怎么使用计数器给元素自动编号”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。