CSS3 通配符选择器作为值答案

【问题标题】：CSS3 wildcard selector as valueCSS3 通配符选择器作为值
【发布时间】：2014-01-12 14:18:22
【问题描述】：

是否可以在 CSS3 中使用通配符作为属性值？

如果有帮助，我会使用 LESS。

例如假设类名是animation-delay-8

[class^=animation-delay-] {
    -webkit-animation-delay: // the value should be 8
}

【问题讨论】：

不可能。您需要使用 JavaScript 或硬编码这些值。
LESS 最后仍然会吐出 CSS，所以它没有任何区别。在生成的 CSS 文件中仍然会有大量的.animation-delay-1 { -webkit-animation-delay: 1; }s。 LESS 可以帮助您简化编写过程，因为您可以从 1 循环到 20。
好的，谢谢。应该添加您的评论作为答案，以便我接受它

【解决方案1】：

这是不可能的。您需要使用 JavaScript，它要么很慢，要么无法正确处理该类的每个元素，或者使用一些预处理器来很好地输出重复的 CSS。

LESS 没有干净的方式来编写循环（除非you like recursion），所以我会使用 SCSS：

@for $i from 1 through 10 {
    .animation-delay-#{$i} {
        -webkit-animation-delay: #{$i};
    }
}

【讨论】：