css3 计数器_使用CSS计数器自动编号

我们介绍了许多很酷CSS3功能-从“ 颜色渐变” ，“转换”和“动画”开始 。 实际上，CSS2中还有一些确实有用但鲜为人知的属性，其中包括我们将在本文中讨论的一个属性： CSS Counter 。

您可能已经知道，当我们添加带有

元素的列表时，该列表会自动编号。 通过使用CSS计数器，我们甚至可以为任何元素编号。 那么，让我们看看它是如何完成的。

基本用法

CSS Counter由两个主要属性组成： counter-reset和counter-increment 。 counter-reset用于重置计数，而counter-increment （与伪元素结合）用于添加数字。

以下代码是一个基本示例，说明我们如何使用这些属性为

元素编号。

body {
	counter-reset: number;
}
h1:before {
	counter-increment: number;
	content: "counter(number) ";
}

此代码为我们提供了以下结果。





如果您希望号码从特定点开始，则可以通过这种方式指定“重设号码”。

body {
	counter-reset: number 1;
}

我们在上面的代码中添加的这个数字就是“重置数字”。 如果未明确声明，则将其默认设置为0 ，并且计数将从1初始化。 换句话说，生成的数字将从counter-reset属性中的下一个数字开始初始化。 因此，在上述示例中，计数将从2开始。





此外，您还可以更改在content属性中指定的数字类型。

h2:before {
	counter-increment: first;
	content: counter(number, upper-roman) ". ";
}

结果将如下所示。





最终思想

此属性可能仅对特定类型的网站有用，并且您可能不会每天都在使用它。 但是，我们希望这篇文章可以在您需要时成为很好的参考。 如果您对此主题有任何疑问，请随时在下面的评论框中发布该问题。

• 观看演示
• 下载源



翻译自: https://www.hongkiat.com/blog/css-automatic-numbering/