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

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;
}

编辑:*根据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 {...}