在CSS选择运营商的二进制,或者它们可以用来连接任意的选择?(Are operators in CS

2019-10-17 06:18发布

例如, div > p可以被用于选择所有<p>它们是直接子元素<div>元素。 它是有效使用div > p > span选择<span>元素具有<p>父和<div>祖父母?

怎么样在CSS选择其他运营商? 它是有效的使用'+' div + p + span或''在div, p, span

如何结合不同的选择? 像div + p > span

Answer 1:

需要注意的是选择器不使用的术语“经营者”。 所述>+符号被更准确地称为组合子 ,而逗号是仅用于一个符号组选择到一个列表 ,并且以相同的类别作为不属于>+组合子。

作为选择电平4的,组合子定义两个元件之间的关系,因此它们确实是二进制的。 你的确可以使用>+多次连续指祖父母或其他相邻的兄弟姐妹。 例如, div > p > span表示以下HTML片段:

<div>
  <p>
    <span></span>
  </p>
</div>

div + p + span表示下面的片段:

<div></div>
<p></p>
<span></span>

你也可以混合和匹配组合子来表示,甚至更复杂的结构。 例如, div + p > span表示<span>的父是<p>这又直接跟随一个<div>如由下面的片段给出:

<div></div>
<p>
  <span></span>
</p>

围绕开关组合子, div > p + span表示<span>直接遵循<p>这又是一个子<div>

<div>
  <p></p>
  <span></span>
</div>

请注意如何这意味着, 无论<span><p>是一样的孩子<div>

但请记住,每一个复杂的选择目标最右边的元素(被称为选择的主题)。 不幸的是,这加上组合子是二进制意味着并不是所有的结构可以被表示。 见我的回答这个问题,对于这两个概念的一个非常深入的解释,为什么这种限制产生的结果。


你也可以使用,多次组尽可能多的选择在一起,只要你喜欢,但这又是从组合子的概念分开。 不同之处在于组合子链接元件一起以形成表示单一粘结结构的复合选择器,而逗号组的多个复杂的选择成用于方便起见一个CSS规则。



文章来源: Are operators in CSS selectors binary, or can they be used to connect arbitrary selectors?