在下面的示例中,我想创建一个仅适用于带有文本“ Blockhead”的标头的CSS规则。
<div class="gumby"> <span class="pokey"></span> <h3>Blockhead</h3> <h3>Clay rules</h3> </div>
我可以使用括号(.gumby > .pokey) + h3吗?如果没有,我有什么选择?
(.gumby > .pokey) + h3
不,括号不是CSS选择器中的有效运算符。他们是保留给功能符号,如:lang(),:not()和:nth-child()。
:lang()
:not()
:nth-child()
无论如何,您不需要它们。.gumby > .pokey + h3本身就可以正常工作。
.gumby > .pokey + h3
这是因为选择器和组合器的序列始终是线性读取的。组合器没有任何优先级。选择器可以解释为
选择 紧跟在class类元素之后的h3元素 ,该元素是class类元素pokey 的子元素gumby。
h3
pokey
gumby
并且由于节点树的工作原理,此处使用同级和子级组合器意味着.pokey和h3都是的子级.gumby(在您的情况下是它们的子级),因为它声明它们都是同级的。
.pokey
.gumby