正如标题,这也是我最近项目中遇到的需求,这个例子很简单,相信大家都会有很多种方法来实现这一效果。在很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现。而我的布局结构恰恰没有到ul ol等元素,所以如果是想要给其他元素增加计数效果就只能另想它法,
正好css3增加了counter属性,可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。
虽然很简单,但是用到了css3的counter属性,很久没用这个属性了,正好来回忆一下知识点,做一个笔记,方便日后查看,所谓“温故而知新”大概就是这个意思,我们还是从基础说起。
CSS Counters用到的属性
前面也提到过,使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:
counter-reset:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。
counter-increment:用来标识计数器与实际相关联的范围。
content:用来生成内容,其为:before、:after或::before、::after的一个属性。在生成计数器内容,主要配合counter()一起使用。
counter():该函数用来设置插入计数器的值。
:before、:after或::before、::after:配合content用来生成计数器内容。<