Question

有没有办法根据设置为两个特定类的class属性的值来选择带有CSS的元素。例如，假设我有3个div：

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

我可以编写哪些CSS来仅选择列表中的第二个元素，因为它是foo和bar类的成员？

Answer 1

链接两个类选择器（中间没有空格）：

.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. 未选中，因为此元素只有类foo。
2. 已选择，因为此元素包含foo和bar类。
3. 未选中，因为此元素只有类bar。
IE6：
1. 未选中，因为此元素没有类bar。
2. 已选择，因为此元素具有类bar，无论列出的是其他任何类。

CSS Selector，适用于具有两个类的元素

1 个答案: