CSS 选择器中是否允许使用括号？答案

【问题标题】：Are parentheses allowed in CSS selectors?CSS 选择器中是否允许使用括号？
【发布时间】：2011-07-25 15:15:00
【问题描述】：

在下面的示例中，我想创建一个仅适用于带有“Blockhead”文本的标题的 CSS 规则。

 <div class="gumby">
     <span class="pokey"></span>
     <h3>Blockhead</h3>
     <h3>Clay rules</h3>
 </div>

我可以使用括号，例如(.gumby > .pokey) + h3吗？如果没有，我的替代方案是什么？

【问题讨论】：

【解决方案1】：

不，括号不是 CSS 选择器中的有效运算符。它们保留用于功能符号，例如 :lang()、:not() 和 :nth-child()。

反正你也不需要它们； .gumby > .pokey + h3 本身就可以正常工作。

这是因为总是读取一系列选择器和组合器linearly。组合器没有任何优先级。选择器可以解释为

选择一个h3 元素
紧跟在 pokey
类的元素之后它是类 gumby 的元素的子元素。

并且由于节点树的工作方式，此处使用兄弟和子组合子意味着.pokey 和h3 都是.gumby 的子代，在您的情况下它们是，因为它声明两者他们是兄弟姐妹。

【讨论】：

虽然“无论如何你都不需要它们”是正确的，但如果允许，括号将有助于避免重复，例如：.gumby > (.hokey, .pokey) + h3
@user686249：该角色将由 :matches() 伪来填补，因此不需要全新的句法结构。
太棒了，不知道那个。
@John：不是这个问题。这个问题没有说明分组选择器，我回复的评论是由一个完全不同的人留下的。您可能在想stackoverflow.com/questions/34771974/… 之类的东西，:matches() 是的实际答案。（您可以争辩说它可以用于:matches(.gumby > .pokey) + h3 之类的东西，但无论如何这完全是多余的，因为它与.gumby > .pokey + h3 具有完全相同的含义。）
:matches() 在 2018 年重命名为 :is()（Chrome 和 Firefox，但不是 Edge）。 github.com/w3c/csswg-drafts/issues/3258, developer.mozilla.org/en-US/docs/Web/CSS/:is

【解决方案2】：

h3 不在 .pokey 中，因此您必须在规则中省略 .pokey

你能做的就是

.gumby h3 {}

或者这样做

 <div class="gumby pokey">
     <h3>Blockhead</h3>
     <h3>Clay rules</h3>
 </div>

.gumby.pokey h3 {}

如果一个标签有多个类，如果你不使用空格字符，你可以将它们堆积在 css 中

【讨论】：