如何選擇兩個類的元素？

Question

我有這樣的HTML：

<h2 class="first second">Red</h2> 
<h2 class="second">Blue</h2> 
<h2 class="first">Green</h2> 

如何選擇h2與first和second類？

_{感謝有關答覆}

---

更新：

如果我有另一個h2標籤是這樣的：

<h2 class="first second third">Default</h2> 

這將是紅色h2.first.second選擇。有沒有什麼辦法只選擇first和second類的元素，而不是更多。

Answer 1

只需：

h2.first.second { 
    color: red; 
} 

此選擇與這兩個類 「第一」 和 「第二」 的h2元件。有關更多信息，請參閱CSS Selectors Level 3 W3建議。

JSFiddle demo。

Answer 2

如果你想與第一和第二類simutaneously

h2.first.second

Answer 3

我創建解決方案的working CodePen example選擇H2。

h2.first.second { 
/* styles go here*/ 
} 

Answer 4

要選擇有多個類簡單的使用這個元素：

h2.first.second 

注意，有類之間沒有空格，如並列到這將選擇與類的second元以下哪是h2元素中與類的first

h2.first .second 

Answer 5

您可以選擇

.first.second {} 

如果您只想選擇第一個h2。確保沒有空間！

Answer 6

以下規則任何h2元件，它的類屬性已被分配了包括兩個「第一」和「第二」空格分開的值的列表相匹配：

h2.first.second { color: red } 

Reference

但，選擇一個元素的類屬性恰好爲等於「第一」和「第二」我用這個規則：

h2[class="first second"], h2[class="second first"] { color: red } 

JsFiddle demo.