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

Question

有没有办法根据设置为两个特定类的类属性的值来选择带有 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 这样的古老浏览器，请注意它不能正确读取链式类选择器：它只会读取 last 类选择器（本文中的.bar case) 代替，而不管您列出了哪些其他类。

为了说明其他浏览器和 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，而与列出的任何其他类无关。

Answer 2

使用 SASS：

.foo {
  /* Styles with class "foo" */
  &bar {
    /* Styles with class "foo bar" */
  }
}

见https://stackoverflow.com/a/49401539/7470360