作者：Ahmadshaded译者：前端小智来源：sitepoint点赞再看，养成习惯本文已收录在GitHubhttps://github.com/qq44924588...更多往期好评文章的分类也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。在我看来，CSS计数器在网络上没有得到充分利用，尽管它们的支持非常好(IE8+)！。在本文中，我将解释如何在您的项目中使用CSS计数器以及一些用例。什么是CSScounter counter是css3提供的一个强大的工具，是一种让我们使用CSS自动给元素编号的方法。非常方便的对页面中的任意元素进行统计，实现类似有序列表的功能。但是相对于有序列表，css计数器可以对任意元素进行计数，还可以实现个性化计数。CSS计数器的相关属性CSS计数器需要三个属性，即：counter-resetcounter-incrementcounter()counter-resetcounter-reset：属性用于定义和初始化一个或多个CSS计数器。它可以采用一个或多个标识符作为值，这些标识符指定计数器的名称。使用语法：counter-reset:[?]+|none|inherit每个计数器名称后面都可以跟一个可选的值，该值指定计数器的初始值。注意：关键字none、inherit和initial不能用作计数器名称；关键字none和inherit可以用作counter-reset属性的值。设置none将重置计数器；设置inherit将从元素的父元素继承计数器重置值。counter-reset属性的默认值为none。计数器的初始值不是计数器显示时的第一个数字/值。也就是说，如果想让计数器从1开始显示，需要将counter-reset中的初始值设置为0。0是默认的初始值，所以如果你省略它，它会默认重置为零；计数器复位允许负值。因此，如果希望计数器从零开始显示，可以将其初始值设置为-1。counter-incrementcounter-increment属性用于指定一个或多个CSS计数器的增量值。它以一个或多个标识符作为值，指定要递增的计数器的名称。使用语法：counter-increment:[?]+|none|inherit每个计数器名称（标识符）后面可以跟一个可选的值，指定计数器需要多少每次元素出现时递增。默认增量为1。允许使用零和负整数。如果指定负整数，则计数器递减。counter-increment属性必须与counter-reset属性一起使用。counter()函数counter()函数必须与content属性一起使用才能显示CSS计数器。它采用CSS计数器名称作为参数并将其作为值传递给content属性，然后使用:before伪元素将计数器显示为生成的内容。counters()函数也有两种形式：counters(name,string)和counters(name,string,style)。name参数也是要显示的计数器的名称。可以使用counter-reset属性指定计数器的名称。counters()函数和counter()函数（单数形式）的区别在于counters()函数可用于设置嵌套计数器。嵌套计数器用于为嵌套元素（例如嵌套列表）提供自动编号。如果您将计数器应用于嵌套列表，您可以为第一级项目编号，例如1、2、3等。第二级列表项目将编号为1.1、1.2、1.3等。第三级项目将为1.1。1,1.1.2,1.1.3,1.2.1,1.2.2,1.2.3,etc.字符串参数用作不同嵌套级别数字之间的分隔符。例如，在'1.1.2'中，使用点（'.'）分隔不同的级别编号。如果我们使用counters()函数指定一个点作为分隔符，它可能看起来像这样：content:counters(counterName,"."); 如果你希望嵌套的计数器用另一个字符分隔，例如，如果你希望它们显示为“1-1-2”，则可以使用破折号代替点作为字符串值： 内容：计数器（计数器名称，“-”）；与counter()函数一样，style参数用于定义计数器的样式。默认情况下，计数器的格式为十进制数。style参数的设置请参考counter()函数的style参数。如何添加计数器1.为计数器选择一个名称假设我们有以下HTML：Section
部分
部分
我要给每个标题元素添加一个数字。为此，我将在父元素上定义一个计数器。.content{counter-reset:section;}大家都说简历里没有项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。2.增加计数器这一步对于计数器的工作非常重要。在
