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

这应该很简单，但是我很难找到它的搜索词。
假设我有这个：

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

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

我知道我可以这样做：

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

但是，假设我将不得不大量使用各种逻辑组合来执行这种逻辑，是否有更好的语法？

有更好的语法吗？

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

还没有，但是有一个实验性的:matches()伪类函数可以做到这一点：

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

您可以在此处和此处找到更多信息。当前，大多数浏览器都支持其初始版本:any()，该初始版本的工作方式相同，但将由代替:matches()。我们只需要再等一会儿，然后再在任何地方使用它（我肯定会）。

如果您有这个：

<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

否。标准CSS不能提供您想要的东西。

但是，您可能需要研究LESS和SASS。

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

它们使您可以编写更加结构化的CSS代码，并且几乎可以肯定两者都可以解决您的特定用例。

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