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

  • Z时代
  • 2024-01-10
  • 分类：问答

是否有一种方法可以根据将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来选择列表中的第二个元素？

回答：

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

.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. 作为该元素具有类foo和bar。

    3. 因为此元素仅具有class bar。

  • IE6：

    1. 因为此元素没有class bar。

    2. 为该元素具有class bar，而与列出的任何其他类无关。

以上是 CSS选择器适用于具有两个类的元素 的全部内容， 来源链接： utcz.com/qa/431919.html

回到顶部