将CSS应用于具有数字名称的类

Question

这是HTML：

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

CSS如下：

.class1, .class2, .class3 { ... }

我不确定是否可行，但我正在尝试简化CSS。

类似的东西：

.class(from1to3) { ... }

Answer 1

如果所有元素的类名都相同，但编号不同，则可以使用Attribute Selectors

div[class^="class"],
div[class*="class"] {
  color: red;
}

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

Answer 2

您可以使用属性选择器。

div[class*='class'] {...}

但是我认为最好的解决方案是：

.class1, .class2, .class3 { ... }

Answer 3

使用div[class*="class"]

div[class*="class"] {
    background: #ffff00;
}

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

Answer 4

考虑使用SASS或其他预处理器，会更容易。