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

Question

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

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

基于它是 foo 和 bar 类的成员这一事实，我可以编写什么 CSS 来仅选择列表中的第二个元素？

Answer 1

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

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

---

如果您仍然需要使用像 Internet Explorer 6 这样的古老浏览器，请注意它无法正确读取链式类选择器：它只会读取 last 类选择器（在本例中为

.bar

），无论您列出的其他类别。

为了说明其他浏览器和 IE6 如何解释这一点，请考虑以下代码片段：

* {
  color: black;
}

.foo.bar {
  color: red;
}

<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

页面将如下所示：

• 在支持的浏览器上：

  1. 未选择，因为此元素仅具有类

     foo

     。
  2. Selected，因为该元素同时具有类

     foo

     和

     bar

     。
  3. 未选择，因为此元素仅具有类

     bar

     。

• 在 Internet Explorer 6 中：

  1. 未选择，因为此元素没有类

     bar

     。
  2. Selected，因为该元素具有类

     bar

     ，无论列出的任何其他类如何。
  3. Selected，因为该元素具有类

     bar

     。

Answer 2

使用SASS：

.foo {
  /* Styles with class "foo" */

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

参见 Less 选择器中 & 符号的含义是什么？

Answer 3

在SCSS中可以通过两种方式完成。

选项1

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

选项2

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

Answer 4

在我的例子中 .Dashboard.Main-root-, .MuiInputBase-root 两个条件都满足，那么只有我们应用了 css 角色

body div[class*="Dashboard.Main-root-"] .MuiInputBase-root:before {
    border-bottom: 1px solid rgb(92 95 98);
}