能否用正则处理CSS按位置递增属性值？含动画延迟场景方案问询

嘿，这个问题我碰到过好多次了，咱们来拆解一下：

纯CSS的局限性 #

首先得明确：纯CSS里没有正则表达式的用法，也没有循环生成样式的原生功能。所以没办法做到“完全自动”给所有<div>设置递增的动画延迟——除非你提前知道元素的固定数量，手动用:nth-child()结合calc()写好对应规则，但这本质上还是手动维护，没法随元素数量变化自动生效。

举个手动维护的例子（元素数量固定时可用）：

.animation-container div {
  animation: fadeIn 0.5s forwards;
}

.animation-container div:nth-child(1) { animation-delay: 0s; }
.animation-container div:nth-child(2) { animation-delay: 0.2s; }
.animation-container div:nth-child(3) { animation-delay: 0.4s; }
/* 继续写更多元素的规则... */

但显然这不是你想要的“无需逐个设置”的效果，所以纯CSS这条路走不通。

CSS预处理器的完美解决方案 #

用SASS、LESS这类预处理器就轻松多了，它们支持循环语法，可以自动生成所有需要的样式规则，不用手动写每一条。

1. SASS 实现 #

SASS的@for循环可以直接帮你批量生成样式：

// 定义动画
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animation-container {
  div {
    animation: slideUp 0.7s ease-out forwards;
    // 循环生成1到20个元素的延迟规则（可根据需求调整数量）
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        animation-delay: calc(0.2s * (#{$i} - 1));
      }
    }
  }
}

编译后会自动生成从:nth-child(1)到:nth-child(20)的样式，每个元素的延迟依次递增0.2s。

2. LESS 实现 #

LESS用递归循环函数来实现：

// 递归循环函数
.animation-delay-loop(@count) when (@count > 0) {
  .animation-delay-loop(@count - 1);
  .animation-container div:nth-child(@count) {
    animation-delay: calc(0.2s * (@count - 1));
  }
}

// 定义动画
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animation-container {
  div {
    animation: slideUp 0.7s ease-out forwards;
  }
}

// 调用循环，设置最大元素数量为20
.animation-delay-loop(20);

效果和SASS一致，编译后自动生成所有需要的延迟规则。

额外小技巧 #

如果你的元素数量不确定，还可以结合JavaScript动态设置（刚好提一下作为补充）：

const animatedDivs = document.querySelectorAll('.animation-container div');
animatedDivs.forEach((div, index) => {
  div.style.animationDelay = `${0.2 * index}s`;
});

这种方式完全不用关心元素数量，自动给每个元素设置递增延迟。

内容的提问来源于stack exchange，提问作者Tabernero