使用nth-child作为CSS变量 [英] Use nth-child as CSS variable

问题描述

是否有某种方法（无需JavaScript）使nth-child影响CSS？

Is there some way (without javascript) to make the nth-child affect the CSS?

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

For example when I have 10 images loaded, I would fade the opacity in, and give each image an animation delay of N seconds.

我可以使用nth-child（1）{}，nth-child（2）{ }，依此类推，但显然很杂乱，并且元素数量有限。

I can do this manually with nth-child(1){}, nth-child(2){} and so on, but that's obviously messy and has a finite amount of elements.

我也尝试过循环，尽管对于（10n + 1）来说效果很好，如果我尝试偏离an + b公式（100n + 10n），它会中断。我也怀疑是否可以每n增加1秒，每10n增加10秒，因为其中一个会覆盖另一个。

I have also tried loops and while that works out well for (10n+1), it breaks if i try to stray from the an+b formula (100n+10n). Also I doubt it would work to add 1 second for every n and 10 seconds for every 10n because one of those would overwrite the other.

这个问题很相似到从2011年开始的那个时间已经过去，这几天也许会有更好的答案。

This question is similar to this one from 2011 which is still open but a lot of time has passed and maybe there's a better answer these days.

推荐答案

CSS不支持使用当前值：nth-​​child（）表达式中的n或当前匹配的子元素的索引作为变量，在 calc（ ）表达式或 var（）表达式或属性值的任何其他部分。

CSS does not support using the current value of n, or the index of the child element currently being matched, from an :nth-child() expression as a variable, neither in calc() expressions nor var() expressions nor any other part of a property value.

您所能获得的最接近的方法是使用确实支持选择器内插变量的预处理器来自动化手动过程。如果您知道需要预先构建的规则数量（但只有那时），这将起作用。

The closest you can get is automating the manual process using a preprocessor that does support interpolating variables within selectors. This will work if you know the number of rules you need to build in advance, but only then.

这篇关于使用nth-child作为CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！