是否可以在CSS中使用这样的数学？

Question

我有像

这样的类的元素

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<div class="class5"></div>
...etc...

不知何故可以在css中为所有这些类使用1个规则？
喜欢

.class[1-5]{
  margin-top:5px;
}

此？

或者只能用JS？

Answer 1

或者，您可以将所有元素设为同一个类。这样：

<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

只需使用css：

.example    {
  margin-top:5px;
}

你可以这样做，因为类可以应用于多个元素（不像id＆＃39; s），即使它们是不同类型的元素。

Answer 2

在css中使用attribute-selector

[class ^= "class"] {

  margin-top:5px;
}

DEMO

Answer 3

你可以这样做：

.class1, .class2, .class3, .class4, .class5 {
  margin-top: 5px;
}

或者甚至更好，在你的div上放两个类：

<div class="class1 marginClass"></div>

.marginClass {
  margin-top: 5px;
}