使用nth-child作为CSS变量

Question

有没有办法(没有javascript)让nth-child影响CSS？

例如,当我加载了10个图像时,我会淡化不透明度,并为每个图像赋予N秒的动画延迟.

我可以使用nth-child(1){},nth-child(2){}等手动完成此操作,但这显然是混乱的,并且具有有限数量的元素.

我也尝试过循环,虽然效果很好(10n + 1),如果我试图偏离a + b公式(100n + 10n),它会中断.此外,我怀疑每10n加1秒,每10n加1秒,因为其中一个会覆盖另一个.

这个问题类似于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;

这里有一些演示。

虽然这对于寻找类似/相关 css 问题的人可能很有用，但这并不是我特定问题的核心。您仍然需要为每个对象手动设置变量。事实上，如果我要使用 css 变量，通过 php 生成它们可能会更有效。（无论是在代码行数、DRY、计算时间、数据传输方面，还是灵活性/鲁棒性方面） (2认同)

Answer 2

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

你可以得到的最接近的是使用预处理程序，自动化手动过程确实选择内支持插值的变量。如果您知道需要提前构建的规则数量，这将起作用，但仅限于那时。