CSS选择器适用于具有两个类的元素


471

是否有一种方法可以根据将class属性的值设置为两个特定的类来选择CSS元素。例如,假设我有3个div:

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

基于它是foo AND bar类的成员,我可以写什么CSS来仅选择列表中的第二个元素?

Answers:


735

链接两个类选择器(之间没有空格):

.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] -->

脚注:

  • 支持的浏览器:
    1. 未选择,因为此元素仅具有class foo
    2. 选择作为该元素具有类foobar
    3. 未选择,因为此元素仅具有class bar

  • IE6:
    1. 未选择,因为此元素没有class bar
    2. 被选中为该元素具有class bar,而与列出的任何其他类无关。

3
我输入的顺序有关系吗?
亚当

3
没关系 (假设您必须支持IE6,它将对IE6产生影响,因为它的解释方式。)
BoltClock

6
它们之间没有空间有关系吗?
CodyBugstein'3

26
@Imray:是的,该空间代表一个后代选择器,这将使每个类选择器代表一个不同的元素。但是我们在这里谈论的是一个元素。
BoltClock

2
@David Brossard:是的,确实如此。
BoltClock
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.