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

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

  

选择h3元素
  紧跟在类pokey的元素之后   这是具有类gumby的元素的子元素。

由于节点树的工作方式，在这里使用兄弟和子组合器意味着.pokey和h3都是.gumby的子节点，在你的情况下它们是，因为它声明他们都是兄弟姐妹。

Answer 2

h3不在.pokey中，所以你必须从规则

中省略.pokey

所有你能做的就是

.gumby h3 {}

或者这样做

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

.gumby.pokey h3 {}

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