如何使用 CSS 選擇器選擇具有多個類別的 HTML 元素？

使用CSS 選擇器定位具有多個類別的元素

使用HTML 和CSS 時，您可能會遇到需要基於選擇元素的情況關於特定階級的價值觀。一個常見的要求是選擇分配有多個類別的元素。

問題：

給定三個具有以下類別的div：

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

如何使用CSS 編寫CSS 來只選擇第二個元素（帶有“foo bar”類別）選擇器？

答案：

要選擇具有多個類別的元素，只需連結類別選擇器，中間不留任何空格。在此範例中，CSS 代碼為：

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

此選擇器會將樣式套用於第二個div，因為它是唯一同時分配了「foo」和「bar」類別的元素.

附加說明：

Internet Explorer 6等較舊的瀏覽器可能無法正確解釋鍊式類選擇器。 IE6只會讀取最後一個類別選擇器，而忽略其他類別選擇器。為了確保與 IE6 的兼容性，您應該避免使用鍊式類選擇器，而應使用更具體的選擇器，例如：

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

以上是如何使用 CSS 選擇器選擇具有多個類別的 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！