我们介绍了许多很酷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) ". ";
}
结果将如下所示。
最终思想
此属性可能仅对特定类型的网站有用,并且您可能不会每天都在使用它。 但是,我们希望这篇文章可以在您需要时成为很好的参考。 如果您对此主题有任何疑问,请随时在下面的评论框中发布该问题。