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

Question

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

 <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 本身就可以正常工作。

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

Select an h3 element
that immediately follows an element with class pokey
that is a child of an element with class gumby.

并且由于节点树的工作方式，此处使用同级和子级组合器意味着 .pokey 和 h3 都是 .gumby< 的子级，在你的例子中是，因为它声明他们都是 sibling 。