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

在CSS 中選擇具有多個類別的元素

許多Web 開發人員經常遇到需要根據特定類別組合來選擇元素的情況。考慮這樣一個場景，您有多個元素，每個元素都有不同的類別屬性，並且您只想定位屬於兩個特定類別的元素。

為了實現這一點，CSS 提供了一個簡單的解決方案：連結類別選擇器。透過連續指定類別名稱（不含空格），您可以符合同時擁有這兩個類別的元素。

例如，假設您有三個div，其類別屬性分配如下：

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

要只選擇同時具有「foo」和「bar」類的第二個div，您可以使用以下CSS：

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

此選擇器有效地將樣式套用於滿足同時具有兩個類別屬性的條件的元素。

但是，要注意的是，Internet Explorer 6 對鍊式類別選擇器有限制。與其他瀏覽器不同，IE6 僅識別最後列出的類別選擇器，這可能會導致意外行為。要解決此問題，建議使用條件語句來支援較舊的瀏覽器。

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