css中的counter计数器
t-jian 时间:2022-07-08
我们在开发页面时时常需要用到序号,如果是使用混编则可以在循环中直接取下标,但写页面更多是前后端分离,在使用js操作下就可以使用css里面提供的计数器。发现是真的好用
counter:是css计数器,只能跟content属性在一起使用的时候才起作用,而content属性专用在before/after伪元素上
由于计数器是伪元素控制显示的。因此,我们几乎可以应用各种CSS样式,各种定位等。所以,基本上,只要有有序序号呈现的地方,就能使用CSS计数器。
counter计数器的属性和方法
属性有:counter-reset、counter-increment
方法有:counter、counters
counter-reset:可以理解为“计数器-重置”的意思,有两个参数:name(必选参数)/ start(可选参数,默认值为0)。主要作用就是给计数器起名字,顺便告诉从哪个数字开始计数。
OK, 这里,先看个简单的counter-reset的例子:
<div class="start1"> <h1>目之所及</h1> <h1>皆是回忆</h1> </div>
.start1 { counter-reset: myCounter; } .start1 h3::before { counter-increment: myCounter 1; content: counter(myCounter, lower-alpha) '. '; }
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。