具有多個類別的元素的CSS 選擇器
確定在CSS 中定位具有特定類別組合的元素的方法可能是Web開發中的常見要求。考慮以下場景，其中三個div 元素有不同的類別組合：
<br><div>
<div class="foo bar">Hello World</div>
<br><p>任務是選擇第二個元素，該元素同時具有foo 和bar </p>
<p><strong>解決方案：鍊式類別選擇器</strong></p>
<p>為了實現這一點，CSS 選擇器提供了一個簡單的解決方案：鍊式類別選擇器。只需將類別名稱寫在一起，不帶任何空格，如以下程式碼所示：</p>
<pre class="brush:php;toolbar:false">.foo.bar {
/* Styles for elements with both foo and bar classes */
}此選擇器僅適用於提供的HTML 中的第二個div 元素，因為它是唯一具有這兩個類別的元素.
Internet Explorer 6 注意
但是，請務必注意Internet Explorer 6在涉及鍊式類選擇器時有一個警告。它只識別鏈中的最後一個類別選擇器，忽略前面的任何類別選擇器。在上面的範例中，IE6 只會將樣式套用於具有 bar 類別的元素，而不會套用於也具有 foo 類別的元素。
範例
考慮以下內容snippet:
*{
color:black;
}
.foo.bar {
color:red;
}
<div>在這種情況下，非IE6 瀏覽器會將紅色應用於第二個div，而IE6 會將其套用到第三個div，因為它只考慮bar 類別。如果需要支援舊版瀏覽器，請注意此行為尤其重要。
以上是如何使用 CSS 選擇器定位具有多個類別的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
