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

Question

在下面的示例中,我想创建一个CSS规则,该规则仅适用于带有文本"Blockhead"的标题.

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

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

Answer 1

不,括号在CSS选择器中不是有效的运算符.他们是保留给功能符号,如:lang(),:not()和:nth-child().

你无论如何都不需要它们; .gumby > .pokey + h3本身就可以正常工作.

这是因为一系列选择器和组合器总是线性读取.组合器没有任何优先权.选择器可以解释为

选择紧跟在元素后面的h3元素
,该元素类pokey
是具有类的元素的子元素gumby.

而由于节点树是如何工作的,使用的兄弟姐妹和子女组合子在这里意味着两个.pokey和h3是孩子.gumby,而你的情况是这样,因为它的声明,即两者都是兄弟姐妹.

虽然“无论如何你都不需要它们”是正确的，但如果允许的话，括号将有助于避免重复，例如：`.gumby > (.hokey, .pokey) + h3` (7认同)
@约翰：不是这个问题。这个问题没有说明分组选择器，我回应的评论是由一个完全不同的人留下的。您可能正在考虑类似 http://stackoverflow.com/questions/34771974/associating-multiple-selectors-with-a-pseudo-class 之类的东西，其中 `:matches()` *是*实际答案。（你*可以*争辩说它可以用于类似`:matches(.gumby > .pokey) + h3`，但无论如何这完全是多余的，因为它与`.gumby > .pokey + h3`具有完全相同的含义.) (3认同)
:matches() 于 2018 年重命名为 :is()（Chrome 和 Firefox，但不是 Edge）。https://github.com/w3c/csswg-drafts/issues/3258，https://developer.mozilla.org/en-US/docs/Web/CSS/:is (3认同)
@ user686249:该角色将由`:matches()`伪填充,因此不需要全新的语法结构. (2认同)