使用nth-child作为CSS变量

Question

使用nth-child作为CSS变量

cssanimationcss-selectors

28

有没有一种方法（不需要JavaScript），可以让nth-child影响CSS？

例如，当我加载10个图像时，我想淡入透明度，并为每个图像设置N秒的动画延迟。

我可以使用nth-child(1){}，nth-child(2){}等手动实现，但这显然很麻烦，有限制的元素数量。

我也尝试了循环和while，虽然对于(10n+1)很有效，但如果我尝试偏离an+b公式（100n+10n），它就会出错。而且我怀疑为每个n添加1秒钟，为每个10n添加10秒钟是否有效，因为其中一个会覆盖另一个。

这个问题类似于2011年的这个问题，该问题仍然未解决，但时间已经过去了很长时间，也许如今有更好的答案。

- PixelSnader

如果值循环，则可以在CSS中使用“nth-child”硬编码一个周期（1n + 0…10n + 0等），然后它将重复。不确定是否满足您的问题，因此仅发布评论。https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child - mccainz

你想为每个子进程添加不同的延迟，是吗？ - Vadim Ovchinnikov

我很惊讶这不是一个重复的问题（时间无关）。没关系，我已经回答了。 - BoltClock

@VadimOvchinnikov 是的。 - PixelSnader

1

@PixelSnader BoltClock已经为您提供了答案（但我不同意CSS预处理器部分），您需要使用JavaScript。 - Vadim Ovchinnikov

3个回答

11

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

你唯一能做到的是使用支持在选择器中插值变量的预处理器自动化手动过程。如果您事先知道需要构建的规则数量，则可以做到这一点，但前提是只有这种情况下才能运行。

- BoltClock

2

在元素上设置一个内联CSS变量 style="--i: 0"，然后添加延迟，如calc((var(--duration)) * var(--i))

.ball {
  height: 5vmin;
  width: 5vmin;
  left: 50vw;
  border-radius: 50%;
  background: red;
  --duration: 1s;
  animation: move-right var(--duration) calc((var(--duration)) * var(--i)) forwards;
  animation-timing-function: linear;
}

@keyframes move-right {
  from {
    transform: none;
  }
  to {
    transform: translateX(20vw);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
          <div class="container">
        <div class="ball" style="--i: 0"></div>
        <div class="ball" style="--i: 1"></div>
        <div class="ball" style="--i: 2"></div>
        <div class="ball" style="--i: 3"></div>
        <div class="ball" style="--i: 4"></div>
        <div class="ball" style="--i: 5"></div>
      </div>
</body>
</html>

- Bar Horing

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Audi Nugraha · Accepted Answer

20

请记住，你也可以在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;

这里展示了一些演示。

- Audi Nugraha

6

虽然这对于寻找类似/相关的CSS问题的人可能有用，但这并没有解决我特定问题的核心。你仍然需要手动为每个对象设置变量。实际上，如果我要使用CSS变量，最好通过PHP生成它们，这可能更高效（无论是代码行数、DRY、计算时间、数据传输还是灵活性/鲁棒性方面）。 - PixelSnader

1

你可以将这些变量与不同的对象或组件重复使用，我相信总有更多的方法使解决方案更加高效。然而，你的问题的核心是什么呢？你想要一种标准或内置的CSS功能来解决你的问题吗？ - Audi Nugraha

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

很棒的解决方案，奥迪。 - undefined