匹配具有以特定字符串开头的类名的所有元素

Question

对于CSS3中具有以特定字符串开头的类名的元素，是否可以使用“通配符”？

例如：

<div class="myclass-one"></div>
<div class="myclass-two></div>
<div class="myclass-three"></div>

然后将所有上述div神奇地设置为红色：

.myclass* { color: #f00; }

Answer 1

以下应该可以解决问题：

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

---

编辑：按照David

的建议添加了通配符（*）

Answer 2

这不是问题的直接答案，但我建议在大多数情况下只为每个元素设置多个类：

<div class="myclass one"></div>
<div class="myclass two></div>
<div class="myclass three"></div>

通过这种方式，您可以为所有myclass元素设置规则，然后为one，two和three设置更具体的规则。

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

Answer 3

您可以轻松地向div添加多个类......所以：

<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>

然后在CSS调用share类中应用相同的样式：

.myclass {...}

你仍然可以使用你的其他课程：

.myclass-three {...}

或者如果你想在CSS中更具体，那么：

.myclass.myclass-three {...}