Html 在calc中使用css计数器

我有一张清单，上面写着li*5（数量不一定相同）。我设置了一个计数器，我得到：

123445

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

问题我可以在计算（）中使用计数器（技能）吗或者我可以向其添加单位px em rem%ms

我试过：

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（）

函数表示（输出）一个

，因此不能直接在

计算中使用。此外，对于浏览器来说，计数器被认为是非常昂贵的

参考：

但是，有人建议添加一个
counter-value（）
函数，该函数将以整数形式返回值，并可在
计算中使用。请参见此处：（向下滚动查看问题4）

因此，到目前为止，您不能在
calc
中使用
计数器
，并且
计数器值
还不存在。
这不一定是一个优雅的解决方案，但您可以使用第n个子项或使用css变量来解决它。代码如下，或参见此处：

第n个子版本：

li{
不透明度：0；
填充：5px 0 5px 5px；
列表样式：无；
背景色：rgba（200,50255.2）；
显示：块；
宽度：20%；
身高：10%；
}
李：第n个孩子（偶数）{背景色：rgba（200,50255,5）；}
@关键帧淡入{0%{opacity:0；}100%{opacity:1；}
li{动画：向前淡入1.5秒；}
/*既然你在做动画，我们的机会就来了
元素的数量将很小，因此您可以预先定义
许多版本使用第n个子版本。这不适用于用例
其中，例如，您希望得到整体的百分比
固定数量的*/
li:n子（1）{动画延迟：1s；}
li:n子（2）{动画延迟：2s；}
li:n子（3）{动画延迟：3s；}
li:n子（4）{动画延迟：4s；}
li:n子（5）{动画延迟：5s；}
li:n子（6）{动画延迟：6s；}
li:n子（7）{动画延迟：7s；}
li:n子（8）{动画延迟：8s；}

事情1
事情2
事情3
事情4
事情5
我认为您无法做到这一点。是否有办法使用第N个孩子（N）来做到这一点