2010-09-22 134 views
318

有沒有一種方法可以根據將class屬性的值設置爲兩個特定的類來選擇具有CSS的元素。例如,假設我有3個div的:適用於具有兩個類的元素的CSS選擇器

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

我能寫什麼CSS選擇列表中,只有第二個元素基於這樣的事實,它既是foo和bar類中的一員?

回答

501

鏈中類選擇(兩者之間沒有空格):

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

如果你仍然不得不面對古老的瀏覽器IE6一樣,要知道,它不能正確讀取鏈接的類選擇:它只會讀最後類選擇器(.bar在這種情況下),而不管您列出的其他類。

爲了說明其他瀏覽器和IE6解釋這一點,考慮這個CSS:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

上支持的瀏覽器的輸出是:在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>  <!-- Not selected, black text [3] --> 

輸出是:

<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. 選中,因爲此元素具有foobar兩個類別。
    3. 未選中,因爲此元素只有類bar

  • IE6:
    1. 沒有選擇作爲該元素不具有bar類。
    2. 選中,因爲此元素擁有類bar,無論列出的任何其他類如何。
+1

這和我把它們放在哪裏有關係嗎? – Adam 2010-09-22 18:08:37

+1

沒關係。 (對於IE6來說,它會如何解釋它,假設你必須支持它。) – BoltClock 2010-09-22 18:09:21

+4

它們之間沒有空間嗎? – CodyBugstein 2015-03-03 22:25:50

相關問題