CSS选择器中的运算符是二进制的，还是可以用于连接任意选择器？ [英] Are operators in CSS selectors binary, or can they be used to connect arbitrary selectors?

问题描述

例如， div> p 可以用于选择< div>

For instance, div > p can be used to select all <p> elements that are direct children of a <div> element. Is it valid to use div > p > span to select a <span> elements that has a <p> parent and a <div> grandparent?

在CSS选择器中的其他操作符呢？在 div，p，span 中使用 div + p + span 或' ？

What about other operators in CSS selectors? Is it valid to use '+' in div + p + span or ',' in div, p, span?

如何组合不同的选择器？喜欢 div + p> span ？

How about combining different selectors? Like div + p > span?

推荐答案

请注意，Selectors不使用术语operator。 > 和 + 符号更准确地称为组合器，而逗号只是用于将组选择器列入列表，并且不属于与> 和 + 组合器。

Note that Selectors doesn't use the term "operator". The > and + symbols are more accurately known as combinators, while the comma is merely a symbol used to group selectors into a list, and doesn't belong in the same category as the > and + combinators.

从选择器级别4开始，组合器定义两个元素之间的关系，二进制。你可以连续多次使用> 或 + 来引用祖父母或其他相邻的兄弟姐妹。例如， div> p> span 表示以下HTML片段：

As of Selectors level 4, combinators define a relationship between two elements, so they are indeed binary. And you can indeed use > or + multiple times in succession to refer to grandparents or other adjacent siblings. For example, div > p > span represents the following HTML fragment:

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

且 div + p + span 以下片段：

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

您还可以混合和匹配组合器来表示更复杂的结构。例如， div + p> span 表示其父级为< p> 的< span> 直接跟随由以下片段给出的< div> ：

You can also mix and match combinators to represent even more complex structures. For example, div + p > span represents a <span> whose parent is a <p> which in turn directly follows a <div>, as given by the following fragment:

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

切换组合器， div& p + span 表示直接在< p> 之后的< span> < div> 的孩子：

Switching the combinators around, div > p + span represents a <span> that directly follows a <p> which in turn is a child of a <div>:

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

注意这意味着 ; span> 和< p> 是同一< div> 。

Notice how this implies that both the <span> and the <p> are children of the same <div>.

请记住，每个复杂选择器都定位到最右侧的元素（称为选择器的主题）。不幸的是，这与耦合器是二进制意味着不是所有的结构都可以表示。请参阅我的回答

Keep in mind though that every complex selector targets the rightmost element (known as the subject of the selector). Unfortunately, this coupled with combinators being binary means that not all structures can be represented. See my answer to this question for an extremely in-depth explanation of both of these concepts and why such a limitation arises as a result.

您还可以使用，多次将任意多个选择器组合在一起，但是这又与组合器的概念。区别在于组合器将元素链接在一起以形成表示单个粘性结构的复杂选择器，而逗号将多个复杂选择器组合成单个CSS规则以方便起见。

You can also use , multiple times to group as many selectors together as you like, but again this is separate from the notion of combinators. The difference is that combinators link elements together to form a complex selector representing a singular cohesive structure, whereas the comma groups multiple complex selectors into a single CSS rule for the sake of convenience.

这篇关于CSS选择器中的运算符是二进制的，还是可以用于连接任意选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！