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 */
}

但是，假设我要做很多这样的逻辑，用各种逻辑组合，有更好的语法吗?

当前回答

如果你有这个:

<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，然后您可以将其部署到您的站点上。

如果你有这个:

<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

还没有，但是有实验性的:is()(以前:matches())伪类选择器，它就是这样做的:

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

你可以在这里和这里找到更多信息。目前，大多数浏览器都支持它的初始版本:any()，其工作方式相同，但将被:is()取代。我们只需要在到处使用它之前再等一会儿(我肯定会)。

对于那些阅读>= 2021的人:

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

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

有没有更好的语法?

不。CSS'或操作符(，)不允许分组。它本质上是选择器中优先级最低的逻辑运算符，因此必须使用.a.c，.b.c。

推荐文章