我有一个列表ul> li * 5(数量不总是相同)。我设置了一个计数器,以获得:
1 2 3 4 5
li:nth-child(n):before {
counter-increment: skill;
content: counter(skill);
color: white;
}
这个问题我可以使用计数器(技能)一内部计算()或者,我可以添加单位是像素EM REM%斯小姐
我努力了:
transition: all 250ms linear #{counter(skill)} * 1s;
transition: all 250ms linear counter(skill) * 1s;
我想增加延迟,例如:
li 1s delay
li 2s delay
li 3s delay
li 4s delay
li Xs delay
我可以在calc()中使用计数器(技能)的问题
不,你不能。
该calc
功能不允许使用counter
功能作为其组件。从这里的规格-https : //www.w3.org/TR/css3-values/#calc-notation:
对此有很多要求,但总是被拒绝。根本原因似乎是该counter()
函数表示(输出)a <string>
,因此不能直接在中使用calc
。此外,对于浏览器而言,计数器被认为非常昂贵。
参考:https : //lists.w3.org/Archives/Public/www-style/2016Aug/0082.html
但是,有人建议添加一个counter-value()
函数,该函数会将值返回为整数,并可以在中使用calc
。参见此处:https : //drafts.csswg.org/css-lists-3/#counter-functions(向下滚动以查看问题4)。
因此,截至目前,您无法counter
在中使用calc
并且counter-value
尚不存在。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句