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 运算符 (,) 不允许分组。它本质上是选择器中优先级最低的逻辑运算符，因此您必须使用.ac,.bc。

Answer 2

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

我使用 :is() 选择器取得了成功：

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

Answer 3

还没有，但是有一个实验性的 :is() （以前的 :matches()）伪类选择器可以做到这一点：

:is(.a, .b).c {
  /* style properties go here */
}

您可以找到更多关于它的信息 < a href="http://css-tricks.com/almanac/selectors/m/matches/" rel="noreferrer">此处 和 这里。目前，大多数浏览器都支持其初始版本 :any()，其工作方式相同，但将被 :is() 取代。我们只需要再等一会儿，然后再到处使用它（我肯定会的）。

Answer 4

如果你有这样的：

<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）： .ax

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

选择所有三个子类：.x

Answer 5

不。标准 CSS 不提供您正在寻找的那种东西。

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

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

它们允许您编写更加结构化的 CSS 代码，并且它们中的任何一个几乎肯定会解决您的特定用例。

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