CSSselect器“（A或B）和C”？

这应该很简单，但我很难find它的search条件。
比方说，我有这个：

<div class="ac">Foo</div> <div class="bc">Bar</div>

在CSS中，如何创build一个匹配“（.a或.b）和.c”匹配的select器？

我知道我可以这样做：

 .ac,.bc { /* CSS stuff */ }

但是，假设我将不得不这样做逻辑很多，有各种各样的逻辑组合，有更好的语法吗？

有更好的语法吗？

“CSS” or运算符（ , ）不允许分组。它本质上是select器中最低优先级的逻辑运算符，因此您必须使用.ac,.bc 。

还没有，但有实验:matches()select器，只是这样做：

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

你可以在这里和这里find更多的信息。目前，大多数浏览器支持它的初始版本:any() ，它的工作方式相同，但会被replace为:matches() 。我们只需等待一会儿再使用这个地方（我肯定会）。

如果你有这个：

 <div class="ax">Foo</div> <div class="bx">Bar</div> <div class="cx">Baz</div>

而你只想select具有.x和（ .a或.b ）的元素，你可以这样写：

 .x:not(.c) { ... }

但是只有当你有三个“子类”并且你想要select其中的两个时，这是很方便的。

只select一个子类（例如.a ） .ax

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

select所有三个子类： .x

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

不过，你可能想看看LESS和SASS 。

这两个项目旨在通过引入附加function来扩展默认CSS语法，包括variables，嵌套规则和其他增强function。

它们允许你写更多结构化的CSS代码，而且它们中的任何一个几乎都可以解决你的特定用例。

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