导航  导航

css中counter的用法

作者: 挺帅
发表于:
更新于:

在上篇文章”css为元素中如何使用css变量“中,用到了counter,因此这篇文章简单记录一下counter的概念和使用。

counter——顾名思义,是计数器的意思。

这个系列的属性包含三个属性:

counter-reset,别被属性名迷惑,简单的可以理解为计数器名称和计数器初始值,名称必填,初始值默认为0。

counter-increment,这是计数器的变化规则,如自增多少、自减多少。

counter(),这是个函数,传入计数器名称,即可返回计数器的值。

下面举个栗子:

div:before{
  counter-reset:num 1; /* 可以写多个计数器,以空格隔开 */
  counter-increment:num 2; /* 计数器num自增2,自减2就是num -2,此属性每写一次就会自增或自减一次 */
  content:counter(num);
}
如果觉得文章还不错,或者对你有帮助的话,那就点个赞呗! 点赞1
向右滑动

全部评论(0)