使用nth-child作为CSS变量

Question

是否有某种方式（没有javascript）让nth-child影响CSS？

例如，当我加载10张图像时，我会淡化不透明度，并为每张图像提供N秒的动画延迟。

我可以使用nth-child（1）{}，nth-child（2）{}等手动完成此操作，但这显然是凌乱的，并且元素数量有限。

我也尝试过循环，虽然这对于（10n + 1）效果很好，如果我试图偏离a + b公式（100n + 10n），它会中断。另外我怀疑每10n增加1秒和10秒会增加1秒，因为其中一个会覆盖另一个。

这个问题类似于this one from 2011，它仍然是开放的，但很多时间过去了，这些天可能有更好的答案。

Answer 1

请记住，您也可以在CSS中分配变量。

:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }

然后您可以像这样应用它：

animation: fade-in calc(var(--nth-child) * 1s) 1s forwards;

下面是一些demo。

Answer 2

CSS不支持使用当前匹配的子元素的当前值或:nth-child()表达式作为变量的当前匹配的子元素的索引，calc()表达式和{{1} }表达式或属性值的任何其他部分。

您可以获得的最接近的是使用预处理器自动执行手动过程， 支持在选择器中插入变量。如果您事先知道需要构建的规则数量，那么这将有效。