首页 文章

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

提问于
浏览 次
382

有没有办法根据设置为两个特定类的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类的成员这一事实？

css css-selectors

1 回答

  • 592

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

    .foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

    如果您仍然需要处理像IE6这样的古老浏览器，请注意它不会只读取 last 类选择器（在本例中为 .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] -->

    脚注：

    • 支持的浏览器：

    • Not selected 因为此元素只有类 foo .

    • Selected 因为此元素具有类 foo 和 bar .

    • Not selected 因为此元素只有类 bar .

    • IE6：

    • Not selected 因为此元素没有类 bar .

    • Selected 因为此元素具有类 bar ，而不管列出的任何其他类 .

    回复于

相关问题