CSS 计数器

CSS 计数器类似于变量。它们由 CSS 维护，并且 CSS 规则可以对其值进行增量操作以跟踪其使用次数。

CSS 计数器可以方便地通过 CSS 进行简单的递增和显示数字，用于生成的内容。

CSS 计数器属性

以下是与 CSS 计数器一起使用的属性列表

• counter-reset: 用于创建或重置计数器。
• counter-increment: 用于递增计数器值。
• content: 用于插入生成的内容。
• counter() 或 counters() 函数: 用于将计数器的值添加到元素中。

注意：在使用 CSS 计数器之前，必须使用 counter-reset 进行创建。

CSS 计数器示例

让我们以一个例子来创建一个页面的计数器，并为每个后续元素递增计数器值。

请看这个例子

注意：在上面的示例中，您可以看到在 body 选择器中为页面创建了一个计数器，它为每个 <h2> 元素递增计数器值，并在每个 <h2> 元素的前面添加“Section <计数器值>：”。

CSS 嵌套计数器

您也可以在计数器内部创建计数器。这称为计数器嵌套。让我们以一个例子来演示嵌套计数器。

请看这个例子

注意：在上面的示例中，您可以看到为 section 创建了一个计数器，并在 section 内创建了另一个名为 subsection 的嵌套计数器。

不同级别的嵌套计数器

您可以使用嵌套计数器创建大纲列表。它允许您在不同级别的嵌套计数器之间插入字符串。

请看这个例子