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

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

例子:

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

然后神奇地将上述所有__abc设置为红色:

.myclass* { color: #f00; }

274076 次浏览

小开

下面的方法可以达到目的:

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

编辑:根据David的建议添加了通配符(*)

小开

这并不是对这个问题的直接回答，但是我建议在大多数情况下简单地为每个元素设置多个类:

<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.

小开

你可以很容易地添加多个类到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 {...}