使用 CSS 计数器自动计数和编号 HTML 元素

假设你有一些未知数量的<div>元素，并且（出于某种原因）你想自动计算它们的数量并给它们编号——你会怎么做？如果你像我一样，你首先想到的可能是用某种 JavaScript 来操作 DOM。如果我告诉你（此处插入 Morpheus 的声音）你可以用 CSS 来做呢？

如何使用 CSS 计数器

使计数器工作需要三个步骤：

• 使用以下代码初始化计数器counter-reset
• 增加计数器counter-increment
• 显示当前计数器值counter()

其实很简单。下面的 Pen 演示了如何计数和编号三个<div>元素。

这在什么情况下有用？

我在寻找一种给博客文章图片编号的方法时发现了 CSS 计数器。这确实是一个很有用的地方。以下是一个简单的示例：