是否有一种方法可以根据将class属性的值设置为两个特定的类来选择CSS元素。例如，假设我有3个div：

 <div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>


我可以写什么CSS基于它是foo AND bar类的成员，仅选择列表中的第二个元素？

#1 楼

链接两个类选择器（之间没有空格）：

 .foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}



如果仍然需要处理IE6之类的古老浏览器，请注意它无法正确读取链接的类选择器：无论您列出什么其他类，它都只会读取最后一个类选择器（在这种情况下为.bar）。

为了说明其他浏览器和IE6对此的解释，请考虑以下CSS：

 * {
    color: black;
}

.foo.bar {
    color: red;
}


在支持的浏览器上的输出是：

 <div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->


在IE6上的输出是：

 <div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->


脚注：


支持浏览器：



未选择，因为此元素仅具有foo类。

选择此元素具有foo和bar两种。

否选定为该元素的t仅具有bar类。




IE6：



未选择因为此元素没有bar类。

被选中为因为此元素具有bar类，而与列出的任何其他类无关。




评论

我输入的顺序有关系吗？

–亚当
2010-09-22在18:08
没关系（假设您必须支持IE6，它将因其解释方式而适用于IE6。）

– BoltClock♦
2010-09-22在18:09


它们之间没有空间有关系吗？

–科迪·布格斯坦（CodyBugstein）
15年3月3日在22:25
@Imray：是的，该空间代表一个后代选择器，这将使每个类选择器代表一个不同的元素。但是我们在这里谈论的是一个元素。

– BoltClock♦
2015年3月4日，3:11
@David Brossard：是的，确实如此。

– BoltClock♦
17-10-22在18:08