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 ，無論列出的任何其餘類。