如何使用CSS计数器自动为元素进行编排

版权声明:本文为作者原创文章,转载请附上原文出处链接和本声明。
本文链接:https://www.weijc.cn/jdetail/361930136043396096

CSS计数器用于向元素添加计数。通过提供可以初始化(使用)的变量来添加计数counter-reset,然后可以通过CSS规则增加这些变量。许多开发人员忽略了此强大的CSS功能,这就是为什么我在本教程中讨论如何使用计数器。

何时使用CSS计数器

1、为复杂列表编号

2、创建动态分页链接

3、入职系统中的编号步骤。

在本教程中,我们将来学习如何使用CSS计数器制作复杂的列表并创建动态分页。

如何使用CSS计数器

CSS的计数系统由以下部分组成counter-reset,counter-increment,counter()和counters()和content。这些属性会帮助你在CSS计数系统中需要做的所有事情。让我们更仔细地研究这些属性,以便我们了解如何使用它们。

Counter Properties说明

counter-reset:用于重置或初始化计数器。要使用CSS计数器,你必须首先使用它创建一个。

counter-increment:用于增加已经初始化的计数器的变量。

counter():此功能神奇的很,在content属性的内部:before或:after伪选择器上使用它来累加计数。

counters():用于继承计数,并在子级中生成父计数器变量的实例。

content:用于通过操纵和CSS选择器的内容来累加计数值(字符串)。

现在我们了解了这些CSS计数器属性和值,让我们深入查看示例。

1、网页上的编号元素

2、进行动态分页

网页上的编号元素

虽然可以使用HTML进行编号,但是CSS编号提供了动态且易于控制的使用CSS计数器完成任务的方式。以下示例将使用CSS为网页上的元素进行编号。首先,我们建立一些简单的编号,仅进行一级编号。然后,我们将转到一个更高级的示例,在该示例中,我们将建立目录。

简单编号

在此示例中,我们将使用CSS创建一个简单的项目计数器。在HTML中,只需按以下方式创建项目结构:

在CSS中,我们将做三件事:1、使用以下方法在父div上初始化计数器 counter-reset;2、通过1对孩子增加计数器值div p使用counter-increment;3、div p使用:before伪选择器将计数器变量添加到内容之前。

上面的编号是纯粹用CSS完成的,有趣吧?

现在,我们将实现一些更复杂的编号,这会使得CSS计数器更加值得学习。我们将使用counters()函数对嵌套元素进行编号,该函数可用于继承计数。这会在子代中生成父代计数器的实例。

目录编号

CSS看起来像这样:

现在,你可以看到嵌套计数的功能counters()。这样可以省去很多麻烦。为了避免错误,它继承了父计数器的属性,并将子计数器附加到它的后面。

下一步:进行动态分页

使用CSS计数器进行分页非常简单。分页通常使用HTML完成,重复相同的元素集并更改内部数字以创建每一页的导航。开发人员可以选择使用动态的东西,例如制作可以生成元素的循环或从服务器执行。但是今天,我们将使用CSS动态地做到这一点!

注意:你无需在内部添加数字,li可以根据需要添加任意数量。我们的CSS counters()将为我们编号。CSS看起来像这样:

就是这样,使用CSS计数器进行编排会变得有趣且简单。

展开阅读全文
还能输入1000个字符