如何根据子元素索引计算CSS Transform参数并解决生效问题？

核心问题1：选择器错误 #

你写的#letters:nth-child(n)是选中id为letters的元素本身（当它是其父元素的第n个子元素时），而非它的子元素。要选中#letters的所有子元素，应使用#letters > :nth-child(n)或#letters > *。

核心问题2：calc()无法直接引用:nth-child()的n #

:nth-child()里的n是选择器的语法变量，不属于CSS属性值的作用域，calc()无法识别它，这直接导致了mismatched parameters ()报错，以及过渡延迟无变化的问题。

解决方法：使用CSS变量传递索引值 #

这是兼容性最优的方案，步骤如下：

1. 通过:nth-child()给每个子元素设置表示索引的CSS变量--index
2. 在calc()中引用该变量计算平移距离与过渡延迟

示例代码：

/* 给所有子元素统一设置过渡属性 */
#letters > * {
    transition: all 1s ease;
}

/* 给每个子元素设置索引变量（根据实际子元素数量扩展） */
#letters > :nth-child(1) { --index: 1; }
#letters > :nth-child(2) { --index: 2; }
#letters > :nth-child(3) { --index: 3; }
#letters > :nth-child(4) { --index: 4; }

/* 利用变量计算最终的变换和延迟 */
#letters > * {
    transform: translateX(calc(var(--index) * 10%));
    transition-delay: calc(var(--index) * 200ms);
}

若子元素数量较多，推荐用Sass/LESS循环批量生成规则，比如Sass代码：

#letters > * {
    transition: all 1s ease;
}

@max-items: 10; // 替换为实际子元素数量
@for $i from 1 through @max-items {
    #letters > :nth-child(#{$i}) {
        --index: #{$i};
    }
}

#letters > * {
    transform: translateX(calc(var(--index) * 10%));
    transition-delay: calc(var(--index) * 200ms);
}

备选方案：使用CSS计数器 #

若不想手动设置变量，可借助CSS计数器自动生成索引值，注意部分旧浏览器对counter()在calc()中的支持有限：

#letters {
    counter-reset: letter-index 0; /* 初始化计数器，起始值为0 */
}

#letters > * {
    counter-increment: letter-index 1; /* 每个子元素让计数器+1 */
    transition: all 1s ease;
    transform: translateX(calc(counter(letter-index) * 10%));
    transition-delay: calc(counter(letter-index) * 200ms);
}

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