使用 nth-child 作为 CSS 变量

Posted 2023-03-06

【中文标题】使用 nth-child 作为 CSS 变量

【英文标题】：Use nth-child as CSS variable

【发布时间】：2018-01-12 11:19:02

【问题描述】：

是否有某种方法（不使用 javascript）使第 n 个孩子影响 CSS？

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

我可以使用 nth-child(1)、nth-child(2) 等手动执行此操作，但这显然很麻烦，并且元素数量有限。

我也尝试过循环，虽然对于 (10n+1) 效果很好，但如果我尝试偏离 an+b 公式 (100n+10n)，它就会中断。我也怀疑每 n 增加 1 秒和每 10n 增加 10 秒是否可行，因为其中一个会覆盖另一个。

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

【问题讨论】：

如果值循环，那么您可以使用第 n 个子项在 CSS 中硬编码一个循环（1n+0...10n+0 等），然后它会重复。不确定这是否会满足您的问题，因此仅作为评论发布。 developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

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

我很惊讶这不是重复的（尽管有时间）。没关系，我回答了。

@VadimOvchinnikov 是的。

@PixelSnader BoltClock 已经为您提供了答案（但我不同意 CSS 预处理器部分），您需要这里的 JavaScript。

【参考方案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。

【讨论】：

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

我相信您可以将这些变量与不同的对象或组件重用，并且总是有更多方法可以提高解决方案的效率。但是，无论如何，您的特定问题的核心是什么？您想要某种标准或内置 CSS 功能来解决您的问题吗？

我的问题的核心是“我可以在 CSS 中计算这个吗”。因为这样就可以有效地使用可变网格，并且您将支持无限元素，而不是固定数量。如果有某种 CSS 标准，那就太好了，是的，因为已经有可能进行计算。但我可以理解它是否超出范围。务实地说，很多效果都可以通过 JS/预处理来完成，但这感觉就像节省了很多额外的工作和数据。

【参考方案2】：

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

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