使用CSS计数器玩转列表编号
时间：2023-03-31 13:50:49
CSS
在网页设计中，以有组织的方式表示数据非常重要，这样用户可以轻松理解网站或内容的结构。最简单的方法是使用有序列表。如果您需要更好地控制数字的外观，您可能会认为需要通过HTML或JavaScript向DOM添加更多元素，并为它们设置样式。幸运的是，CSS计数器为您省去了很多麻烦。在本教程中，我们将演示如何开始使用CSS计数器并介绍一些用例。相关阅读：使用CSS::marker自定义项目符号排序列表的问题当编写如下所示的排序列表时，浏览器会自动显示数字。
- 我的第一个项目
- 我的第二个项目
- 我的第三个项目
这很好，但是它不能让你设置样式数字改变。例如，假设您需要将数字放在圆圈内。你会怎么做一种方法是完全摆脱列表并自己手动添加数字。
1我的第一个项目
2我的第二个项目
3我的第三个项目
这完成了我们需要它做的事情，但有一些缺点。一方面，手写数字很困难。而且，如果你需要修改一个数字怎么办？你必须一个一个地改变它们。可以使用JavaScript动态添加
元素来解决这些问题，但是这样会给DOM添加更多的节点，导致内存占用严重。在大多数情况下，最好使用CSS计数器。让我们检查一下原因。CSS计数器简介CSS计数器是网页范围变量，其值可以使用CSS规则更改。首先，使用counter-reset属性设置一个计数器。list-number是此处要使用的变量名。.list{counter-reset:list-number;}接下来，使用counter-increment属性增加计数器。.listdiv{counter-increment:list-number;}现在，每次出现.listdiv元素时，list-number变量将递增1。最后，使用content属性中的:before伪元素和counter()函数来显示数字。.listdiv:before{content:counter(list-number);}这是完整的代码：Myfirstitem
Myseconditem
我的第三项
效果如下我们还没到呢让我们为:before伪元素设计样式以使其看起来更好。.listdiv:before{counter-increment:list-number;内容：计数器（列表编号）；右边距：10px；底部边距：10px；宽度：35px；高度：35px；-项目：中心；证明内容：居中；字体大小：16px；背景色：#d7385e；边界半径：50%；计数器设置为0，在第一次调用counter-increment函数后从1开始。通过将整数作为第二个参数传递给计数器重置函数来设置初始值。.list{counter-reset:list-number1;}如果要从0开始，设置初始值为-1。.list{counter-reset:list-number-1;}改变增量值默认情况下，counter-increment会将计数器的值加一。就像计数器重置一样，您可以为计数器增量属性定义一个偏移量。在此示例中，counter-reset将list-number设置为0。每次调用counter-increment时，list-number的值将递增2，因此您将看到数字2、4和6。.list{counter-reset:list-number;}.listdiv:before{counter-increment:list-number2;//杂项样式}计数器格式counter()函数可以有两个参数：计数器名称和计数器格式。对于第二个参数，可以使用任何有效的list-style-type值，包括：decimal（例如，1、2、3…）lower-latin（例如，a、b、c…）lower-roman（例如，i,ii,iii...)默认值为十进制。例如，如果您像我一样热爱科学，则可以使用小希腊语进行alpha-beta值编号。.listdiv:before{counter-increment:list-number;内容：计数器（列表编号，低希腊语）；//...其他样式}嵌套计数器当使用嵌套有序列表时，数字总是以下列格式显示：如果您需要子列表项的数字（例如1.1），您可以使用带有counters()函数的CSS计数器。
- 我的第一个项目
- 我嵌套的第一个项目
- 我嵌套的第二个项目
- 我的第二个项目
li>
效果如下请注意，我们使用的是counters()函数，而不是counter()。counters()函数的第二个参数是连接字符串。它还可以有第三个参数来设置格式（例如希腊语或罗马语）。带有标题的嵌套计数器元素（如
、）不会嵌套在文档中。它们显示为不同的元素，但仍然代表一个层次结构。以下是在标题前添加嵌套数字的方法：body{counter-reset:h1;}h1{counter-reset:h2;}h1:before{counter-increment:h1;内容：计数器（h1）“。”;}h2:before{反增量:h2;内容：计数器（h1）“。”counter(h2)".";}每次找到h1时，都会重置h2计数器。文档中的每个都会得到一个相对于x.y的数字。的。浏览器支持值得庆幸的是，自从CSS2引入CSS计数器以来，浏览器已经广泛支持它们。虽然对内容以外的属性使用counter()函数仍处于试验阶段，但您可以毫不犹豫地完成我们在本教程中介绍的所有练习。以下是我可用的浏览器支持详细信息。一个简单的挑战你准备好迎接一个涉及CSS计数器的简单挑战了吗？使用CSS计数器，用10行代码显示1到1000及其罗马字符。如果您感到困惑，方法如下：要创建1,000个div元素，请使用以下内容。对于(vari=0;i<1000;i++){文档。身体。appendChild(document.createElement("div"));}CSScounters:body{counter-reset:number;}div:before{counter-increment:number;content:counter(number)"=>"counter(number,lower-roman);}这是你想出来的？结论下面是我们使用的属性列表。CSS计数器是CSS中一个鲜为人知的特性，但您会惊讶于它的使用频率。在本教程中，我们通过一些示例介绍了如何以及何时使用CSS计数器。属性将计数器重置（或创建）为给定值，使用counter-reset（默认为0）counter-increment将给定计数器递增给定偏移量（默认为1）具有给定格式的计数器counters(counter-name,counter-string,counter-format)从给定格式获取嵌套计数器的值当然，CSS计数器很酷。但是让我担心的一件事是所有柜台都是全球性的。如果你在一个有很多CSS文件的大项目中大量使用，你可能找不到它们在哪里创建、重置和递增。如果可以，不要过度使用它，如果你必须使用它，一定要为计数器使用一个描述性的名称，以避免冲突。原文：https://blog.logrocket.com作者：SupunKavinda
