导航  导航
每日一言

能被js重写的终将会被js重写。

css 标签下的全部文章(2)

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); }

css伪元素content中如何使用css变量?

css变量很香,但是无法直接在伪元素content属性中使用。例如:div:before{ --num:50; content:var(--num) } 这样使用是一点作用都没有的,所以,只能借助外力——counter,正确用法:div:before{ --num:50; counter-reset:num var(--num); content:counter(num) }