CSS Selector，适用于具备两个类的元素

有没有办法根据设置为两个特定类的类属性的值来选择具备CSS的元素。 例如，假设我有3个div：

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

我能够写什么CSS来选择列表中的第二个元素，基于它是foo和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] -->

脚注：

• 支持的浏览器
  1. 未选择此元素仅具备类foo 。
  2. 选择此元素同时具备类foo和bar 。
  3. 未选择此元素仅具备类bar 。
     
     
• IE6：
  1. 未选中此元素没有类bar 。
  2. 选择此元素具备类bar ，无论列出的任何其余类。