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

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

我使用

:is()

选择器成功了：

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

Answer 3

还没有，但是有一个实验性的

:is()

（以前的

:matches()

）伪类选择器可以做到这一点：

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

您可以在此处和此处找到更多信息。目前，大多数浏览器都支持其初始版本

: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

）：

.a.x

选择两个子类（例如

.a

和

.b

）：

.x:not(.c)

选择所有三个子类：

.x

Answer 5

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

但是，您可能想研究一下 LESS 和 SASS。

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

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

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