使用nth-child作为CSS变量

有没有一些方法（没有JavaScript）使nth-child影响CSS？使用nth-child作为CSS变量

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

我可以用nth-child（1）{}，nth-child（2）{}等手动执行此操作，但显然很麻烦并且元素数量有限。

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

这个问题与this one from 2011类似，它仍然是开放的，但很多时间已经过去了，也许现在有更好的答案。

2017-08-04 PixelSnader

如果值循环，则可以使用第n个孩子在CSS中对一个循环（1n + 0 ... 10n + 0等）进行硬编码，然后重复。不知道这是否会满足您的问题，所以只发布评论。 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child – mccainz

你想为每个孩子添加不同的延迟，是吗？ –

我很惊讶，这不是一个重复（时间尽管）。没关系，我回答。 – BoltClock

CSS不支持使用n的当前值，或目前被匹配子元素的索引，从:nth-child()表达式作为变量，无论是在calc()表达式也不var()表达式，也不是一个属性值的任何其它部分。

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

来源

2017-08-05 10:01:48 BoltClock

使用nth-child作为CSS变量

回答

相关问题