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

Question

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

例子：

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

然后神奇地将上述所有divs 一次性设置为红色：

.myclass* { color: #f00; }

Answer 1

以下应该可以解决问题：

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

---

*编辑：按照大卫的建议添加了通配符 ( )

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 调用中应用相同的样式：

.myclass {...}

你仍然可以像这样使用你的其他类：

.myclass-three {...}

或者，如果您想在 CSS 中更具体，如下所示：

.myclass.myclass-three {...}