有没有一种方法可以根据设置为两个特定类的class属性的值,用CSS Select 一个元素.例如,假设我有3个div:
<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>
根据列表中的第二个元素既是foo类又是bar类的成员的事实,我可以编写什么CSS来仅 Select 它呢?
有没有一种方法可以根据设置为两个特定类的class属性的值,用CSS Select 一个元素.例如,假设我有3个div:
<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>
根据列表中的第二个元素既是foo类又是bar类的成员的事实,我可以编写什么CSS来仅 Select 它呢?
链接两个类 Select 器(中间没有空格):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
如果你仍然需要处理像IE6这样的古老浏览器,请注意它不会正确读取链式类 Select 器:它只会读取last类 Select 器(本例中为.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
类,而不考虑列出的任何其他类.