CSS计数器（Counter）：自动生成序号、列表计数

CSS计数器是CSS的一个强大功能，可以自动生成序号、列表计数等。本教程将详细讲解CSS计数器的使用方法及注意事项。

一、使用方法

CSS计数器的使用方法很简单，只需要定义一个计数器，并在需要使用计数器的地方引用即可。

/* 定义计数器 */
body {
  counter-reset: chapter;
}

/* 引用计数器 */
h1:before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
}

以上代码中，我们通过counter-reset定义了一个名为chapter的计数器，并将其初始化为0。然后在需要使用计数器的地方，通过counter-increment将计数器值加1，并在content中引用计数器值。

二、注意事项

在使用CSS计数器时，需要注意以下几点：

• 计数器只能通过counter-reset定义，并不能直接赋值。
• 每个计数器都有一个默认值，如果未定义counter-reset，则计数器的值为默认值。
• 计数器的值只能为整数。
• 计数器的值可以在任何CSS选择器中引用。
• 计数器的值只能通过counter-increment进行+1操作，不能进行其他数学运算。
• 通过counter()函数引用计数器时，可以在计数器值前后增加任何文本。

三、案例演示

下面的案例演示了如何使用CSS计数器生成一个带有序号的列表。

/* 定义计数器 */
body {
  counter-reset: list;
}

/* 引用计数器 */
li:before {
  counter-increment: list;
  content: counter(list) ". ";
}

HTML代码：

  
列表项1
  
列表项2
  
列表项3

效果如下：

• 1. 列表项1
• 2. 列表项2
• 3. 列表项3

四、总结

CSS计数器是CSS的一个强大功能，可以自动生成序号、列表计数等。掌握CSS计数器的使用方法，可以大大提高前端开发效率。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS绘制图形：矩形、圆形、椭圆、多边形
• 下一篇： CSS过渡与动画：过渡效果、动画属性、关键帧动画