Question

我有

.cover0,.cover1,.cover2
{
    opacity : .50;
    filter  : alpha(opacity=50); /* IE<9 */
    cursor  : default;
}

在我的样式表中。

我需要添加最多.cover100的课程。

除了硬编码之外还有办法吗？

类似于JavaScript中的for循环..可以在样式表中做类似的事情吗？

谢谢！

Answer 1

只需使用SASS即可。这很简单：

NULL

DEMO： http://www.sassmeister.com/gist/6a945392481c3d2bab6e8e7969e5bfb2

Answer 2

SASS是最好的选择。

虽然您可以使用Attribute selector

*表示类包含

注意：这将匹配包含cover的其他类，即covered等

[class*=cover] {

    height:50px;
    border:1px solid black;
      opacity : .50;
      filter  : alpha(opacity=50); /* IE<9 */
      cursor  : default;
  }

<div class="cover extras">
</div>
<div class="cover">
</div>
<div class="befores cover">
</div>

Answer 3

使用纯CSS无法做到这一点。

但是，您可以查看CSS预处理器，例如LESS：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

// Result:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Source

在css表中填充编号的类名

3 个答案: