CSS选择器“（A或B）和C”？

Question

这应该很简单，但我找不到它的搜索条件 假设我有这个：

<div class="a c">Foo</div>
<div class="b c">Bar</div>

在CSS中，我如何创建一个匹配“（.a或.b）和.c”匹配的选择器？

我知道我可以这样做：

.a.c,.b.c {
  /* CSS stuff */
}

但是，假设我必须经常使用各种逻辑组合来做这种逻辑，那么有更好的语法吗？

Answer 1

  

有更好的语法吗？

没有。 CSS'or运算符（,）不允许分组。它本质上是选择器中最低优先级的逻辑运算符，因此您必须使用.a.c,.b.c。

Answer 2

还没有，但有实验:matches()选择器可以做到这一点：

:matches(.a .b) .c {
  /*stuff goes here */
}

您可以在其上找到更多信息here和here。目前，大多数浏览器都支持它的初始版本:any()，它的工作方式相同，但会被:matches()取代。我们只需等待一段时间再到处使用它（我肯定会）。

Answer 3

如果你有这个：

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

您只想选择包含.x和（.a或.b）的元素，您可以写：

.x:not(.c) { ... }

但只有当你有三个“子类”并且想要选择其中两个时，这才很方便。

只选择一个子类（例如.a）：.a.x

选择两个子类（例如.a和.b）：.x:not(.c)

选择所有三个子类：.x

Answer 4

对于阅读本文的人 >= 2021 年：

我发现使用 :is() 选择器很成功：

*:is(.a, .b).c{...}

Answer 5

没有。标准CSS不提供您正在寻找的东西。

但是，您可能需要查看LESS和SASS。

这两个项目旨在通过引入其他功能（包括变量，嵌套规则和其他增强功能）来扩展默认CSS语法。

它们允许您编写更多结构化的CSS代码，其中任何一个几乎都能解决您的特定用例。

当然，没有一个浏览器支持他们的扩展语法（特别是因为这两个项目各自具有不同的语法和功能），但他们所做的是提供一个“编译器”，将您的LESS或SASS代码转换为标准CSS，然后，您可以在您的网站上进行部署。