鏈中類選擇(兩者之間沒有空格):
.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] -->
腳註:
- 支持的瀏覽器:
- 沒有選擇作爲該元素只有
foo
類。
- 選中,因爲此元素具有
foo
和bar
兩個類別。
- 未選中,因爲此元素只有類
bar
。
- IE6:
- 沒有選擇作爲該元素不具有
bar
類。
- 選中,因爲此元素擁有類
bar
,無論列出的任何其他類如何。
這和我把它們放在哪裏有關係嗎? – Adam 2010-09-22 18:08:37
沒關係。 (對於IE6來說,它會如何解釋它,假設你必須支持它。) – BoltClock 2010-09-22 18:09:21
它們之間沒有空間嗎? – CodyBugstein 2015-03-03 22:25:50