Answers:
链接两个类选择器(之间没有空格):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
如果仍然需要处理IE6之类的古老浏览器,请注意,它无法正确读取链接的类选择器:无论您列出什么其他类,它都只会读取最后一个类选择器(.bar
在这种情况下)。
为了说明其他浏览器和IE6如何解释这一点,请考虑以下CSS:
* {
color: black;
}
.foo.bar {
color: red;
}
在支持的浏览器上的输出是:
<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] -->
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> <!-- Selected, red text [2] -->
脚注:
foo
。foo
和bar
。bar
。
bar
。bar
,而与列出的任何其他类无关。