Counter-Style Counter CSS 计数器 - CSS

CSS计数器是一种内置于CSS的功能，可以对HTML中的某些元素进行自动编号。counter-style属性允许开发者创建自定义计数器样式。

使用counter-style属性

创建计数器样式

开发者可以使用counter-style属性来定义计数器样式。通过使用@counter-style规则向文档中添加自定义计数器。如下所示：

@counter-style example {
  system: alphanumeric;
  symbols: '+' '-' '\A';
  suffix: ' ';
  pad: 3;
}

• system：指定计数器使用的系统。CSS提供了多种系统类型，包括numeric, alphabetic, symbolic等等。更多具体信息请参考MDN文档。
• symbols：指定计数器使用的符号。可以是一个或多个Unicode字符。 Counter每增加一个的值将使用下一个符号代表。
• suffix：指定了一个后缀，当计数器值结束时添加。
• pad：指定了一个位数（或几位数），用零填充，在每个计数之前。

应用计数器样式

定义计数器样式后，可以使用counter-reset和counter-increment属性应用计数器样式。由于使用绝对值，使用calc可以确保计算机带换行符的数字的数量正确。如下所示：

.example {
  counter-reset: example;
}

/* Add a number to this element */
.example:before {
  content: counter(example);
  counter-increment: example;
}

• counter-reset: 重置一个特定的计数器，使其最终值为0。
• content: 此属性主要用于显示元素内容的伪元素之后。

总结

CSS计数器为开发者提供了一个方便的机制，在无需使用JavaScript的情况下对元素进行自动编号。创建自定义计数器样式的能力使得开发者可以对计数器进行更精细的控制。