Css 是否可以将第n个子值用作属性中的参数？（以及如何） 简短描述（tl；dr；）

是否有一种“纯CSS”方式（不少于/Sass）在CSS属性中使用第n个子项的值？大概是这样的：

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
    setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}

如果有，我怎么做？如果没有，我怎么能以干净的方式模仿它呢？（我肯定我把这里的事情复杂化了）

---

长描述 我正在创建一个简单的动画，其中字母在旋转时淡入。为此，我使用了javascript（带jQuery）和CSS的组合，但这造成了一些问题（见下文）；因此，我尝试转向一个只使用CSS的解决方案，结果是产生了大量的规则

这种（简化的）CSS在两种解决方案中都是通用的：

span.anim {
    font-size:30px;
    opacity:0;
    animation: anim 1s;
    animation-fill-mode: forwards;
}

@keyframes anim {
    from {
        transform: rotate(0deg);
        opacity:0;
    }
    to {
        transform: rotate(360deg);
        opacity:1;
    }
}

使用JavaScript+CSS

我的JavaScript代码如下所示：

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
    setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}

这非常有效，即使用户移动到不同的选项卡，但会产生大量不必要的代码（HTML和CSS，尽管可以使用JavaScript简化）。您可以看到它在这个JSFIDLE:上工作

我的直觉告诉我，使用Sass/Less可以实现这一点，但我想知道是否有一种简单的“纯CSS”方法可以做到这一点，这可以通过一个规则实现（希望如此），如：

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

。目前它只在伪元素上工作，所以你必须考虑在这个用例中对你的标记进行某种巧妙的修改。

您可以将偏移量放在标记的数据属性中（或使用JS），然后使用如下内容：

/*attr（名称、单位、后备）*/
span.anim{动画延迟：attr（偏移量，1）*0.5s；}

请记住，这离被广泛接受还有很长的路要走，就像我前面提到的，上面的语法目前不起作用，因为它需要使用伪元素，如：after

至少，这是一件值得思考的事情。

具有并可以实现与“加上更多”几乎相同的预期效果。不必在用户定义的属性中定义数据，您可以在

style

属性中将其定义为自定义属性，并使用

var（）

函数获取这些自定义属性的值：

span.anim{
动画延迟：计算（var（--n）*0.5s）；
}

简单地说……不，没有。那么我是不是把事情复杂化了？或者复杂的方法是这种情况下的唯一方法？Sass/Less是为了减少不必要的书面代码。但它会产生相同的css。没有CSS框架或JS是不可能的。我想说，使用JS是最短和最好的可维护解决方案。正如您所说，当您要创建的列表的长度可能会有很大的变化时，这将非常有用。我想知道这个特性是否符合css4规范……它不仅适用于伪元素，而且只适用于content属性。有关attr（）函数的更多信息，请参见。谢谢！对于我类似的问题，一个很好的答案是：良好的兼容性，可以立即使用