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

有更好的语法吗？

没有.cIN' or运营商(,)不允许分组.它本质上是选择器中最低优先级的逻辑运算符,因此必须使用.a.c,.b.c.

Answer 2

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

:matches(.a .b) .c {
  /* stuff goes 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，然后你可以部署在您的网站上。