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

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

例子:

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

然后神奇地将以上所有div设置为红色:

.myclass* { color: #f00; }

当前回答

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

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

通过这种方式，您可以为所有myclass元素设置规则，然后为1,2,3设置更具体的规则。

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

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

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元素设置规则，然后为1,2,3设置更具体的规则。

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

推荐文章