Html CSS 选择器“（A 或 B）和 C”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7517429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Selector "(A or B) and C"?
提问by Josh
This should be simple, but I'm having trouble finding the search terms for it.
Let's say I have this:
这应该很简单，但我无法找到它的搜索词。
假设我有这个：
<div class="a c">Foo</div>
<div class="b c">Bar</div>
In CSS, how can I create a selector that matches something that matches "(.a or .b) and .c"?
在 CSS 中，如何创建一个匹配“(.a 或 .b) 和 .c”的选择器？
I know I could do this:
我知道我可以这样做：
.a.c,.b.c {
/* CSS stuff */
}
But, assuming I'm going to have to do this sort of logic a lot, with a variety of logical combinations, is there a better syntax?
但是，假设我将不得不用各种逻辑组合来做很多这种逻辑，有没有更好的语法？
采纳答案by Matt Ball
is there a better syntax?
有更好的语法吗？
No. CSS' oroperator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.
不可以。CSS 的or运算符 ( ,) 不允许分组。它本质上是选择器中最低优先级的逻辑运算符，因此您必须使用.a.c,.b.c.
回答by Metalcoder
Not yet, but there is the experimental :matches()pseudo-class function that does just that:
还没有，但是有一个实验性的:matches()伪类函数可以做到这一点：
:matches(.a .b) .c {
/* stuff goes here */
}
You can find more info on it hereand here. Currently, most browsers support its initial version :any(), which works the same way, but will be replaced by :matches(). We just have to wait a little more before using this everywhere (I surely will).
您可以在此处和此处找到有关它的更多信息。目前，大多数浏览器都支持其初始版本:any()，其工作方式相同，但将被:matches(). 在到处使用它之前，我们只需要再等一会儿（我肯定会）。
回答by ?ime Vidas
If you have this:
如果你有这个：
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
And you only want to select the elements which have .xand (.aor .b), you could write:
并且您只想选择具有.x和 (.a或.b)的元素，您可以编写：
.x:not(.c) { ... }
but that's convenient only when you have three "sub-classes" and you want to select two of them.
但只有当您有三个“子类”并且您想选择其中两个时，这才方便。
Selecting only one sub-class (for instance .a): .a.x
仅选择一个子类（例如.a）：.a.x
Selecting two sub-classes (for instance .aand .b): .x:not(.c)
选择两个子类（例如.a和.b）：.x:not(.c)
Selecting all three sub-classes: .x
选择所有三个子类： .x
回答by Spudley
No. Standard CSS does not provide the kind of thing you're looking for.
不。标准 CSS 不提供您正在寻找的那种东西。
However, you might want to look into LESSand SASS.
These are two projects which aim to extend default CSS syntax by introducing additional features, including variables, nested rules, and other enhancements.
这是两个旨在通过引入附加功能（包括变量、嵌套规则和其他增强功能）来扩展默认 CSS 语法的项目。
They allow you to write much more structured CSS code, and either of them will almost certainly solve your particular use case.
它们允许您编写更多结构化的 CSS 代码，并且它们中的任何一个几乎肯定会解决您的特定用例。
Of course, none of the browsers support their extended syntax (especially since the two projects each have different syntax and features), but what they do is provide a "compiler" which converts your LESS or SASS code into standard CSS, which you can then deploy on your site.
当然，没有一个浏览器支持它们的扩展语法（特别是因为这两个项目都有不同的语法和特性），但它们所做的是提供一个“编译器”，将你的 LESS 或 SASS 代码转换为标准 CSS，然后你可以部署在您的网站上。
