使用css计数器计算

Question

我有一个列表ul> li * 5（并不总是相同的数量）。我将计数器设置为它获得：

li:nth-child(n):before { 
    counter-increment: skill; 
    content: counter(skill); 
    color: white; 
} 

问题可否使用计数器（技能）一个计算值（）内或I可以添加单位给它像素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 

Answer 1

的问题我可以使用计算（）里的柜台（技能）

号你不能。

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

一个 calc()表达 的

组件可以是文字值或 attr()或 calc() 表达式。

对此有很多要求，但总是拒绝。潜在的原因似乎是counter()函数代表（输出）一个<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期）。

因此，截至目前，您不能在calc内使用counter，并且counter-value尚不存在。