在计算中使用CSS计数器

T04435

我有一个列表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
Abhitalks

我可以在calc()中使用计数器(技能)的问题

不,你不能。

calc功能不允许使用counter功能作为其组件。从这里的规格-https : //www.w3.org/TR/css3-values/#calc-notation

一个的部件calc()表达可以是文字值或attr()calc()表达式。

对此有很多要求,但总是被拒绝。根本原因似乎是该counter()函数表示(输出)a <string>,因此不能直接在中使用calc此外,对于浏览器而言,计数器被认为非常昂贵。

参考:https : //lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

但是,有人建议添加一个counter-value()函数,函数会将值返回为整数,并可以在中使用calc参见此处:https : //drafts.c​​sswg.org/css-lists-3/#counter-functions(向下滚动以查看问题4)。

因此,截至目前,您无法counter在中使用calc并且counter-value尚不存在。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章