遍历 CSS 元素 [重复]

【问题标题】：Iterating Through CSS Elements [duplicate]遍历 CSS 元素 [重复]
【发布时间】：2022-02-10 08:35:47
【问题描述】：

我正在重新学习 CSS，我想知道如何做这样的事情：

li:nth-child(n) {
    display: block;
    animation: animate 500ms ease-in-out forwards;
    animation-delay: calc(n * 200ms);
}

其中n是当前的li元素，延迟等于n * 200ms

【问题讨论】：

标签： html css loops

【解决方案1】：

目前，CSS 无法通过迭代范围来创建选择器。

但是，您可以使用 SCSS，它是一种 CSS 预处理器，可扩展语言并在输出中生成有效的 CSS 文件。

在 SCSS 中，您的代码如下所示：

@for $i from 1 through 3 {
  li:nth-child(#{$i}) {
    display: block;
    animation: animate 500ms ease-in-out forwards;
    animation-delay: calc($i * 200ms);
  }
}

【讨论】：