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

问题描述

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

 <div class="gumby"><span class="pokey"></span><h3>笨蛋</h3><h3>粘土规则</h3></div>

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

解决方案

不，括号不是 CSS 选择器中的有效运算符.它们是为函数符号保留的，例如 :lang()、:not() 和 :nth-child().p>

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

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

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

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

In the below example, I want to create a CSS rule that applies only to the header with the text "Blockhead".

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

Can I use parentheses, such as (.gumby > .pokey) + h3? If not, what is my alternative?

解决方案

No, parentheses are not valid operators in CSS selectors. They are reserved for functional notations, such as :lang(), :not(), and :nth-child().

You don't need them anyway; .gumby > .pokey + h3 by itself will work just fine.

This is because a sequence of selectors and combinators is always read linearly. Combinators don't have any sort of precedence. The selector can be interpreted as

And because of how node trees work, the use of sibling and child combinators here implies that both .pokey and the h3 are children of .gumby, which in your case they are, because of its statement that both of them are siblings.

这篇关于CSS 选择器中是否允许使用括号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！