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

最新推荐文章于 2024-06-21 05:52:22 发布

cune1359

最新推荐文章于 2024-06-21 05:52:22 发布

阅读量518

点赞数

文章标签：列表 java javascript python css ViewUI

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

您可能已经知道，当我们添加带有<ol>元素的列表时，该列表会自动编号。通过使用CSS计数器，我们甚至可以为任何元素编号。那么，让我们看看它是如何完成的。

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

以下代码是一个基本示例，说明我们如何使用这些属性为<h1>元素编号。

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/

关注