CSS选择器中的运算符是二进制的，还是可以用来连接任意选择器？

例如，

div>p

可用于选择作为

元素的直接子元素的所有

元素。使用

div>p>span

选择具有

父元素和
祖父母的
元素是否有效

CSS选择器中的其他操作符呢？在
div+p+span
中使用“+”或在
div，p，span
中使用“+”是否有效

如何组合不同的选择器？如
div+p>span
？
请注意，选择器不使用术语“运算符”。
和
+
符号更准确地称为，而逗号只是一个用于的符号，与
和
+
组合符不属于同一类别

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

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

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

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

您还可以混合和匹配组合符来表示更复杂的结构。例如，
div+p>span
表示一个
，其父项是一个
，而该父项又直接跟在一个
后面，如下段所示：

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

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

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

注意这意味着
和
都是同一
的子对象

请记住，每个复杂选择器都以最右边的元素（称为选择器的主题）为目标。不幸的是，这加上组合子是二进制的，意味着并非所有结构都可以表示。请参阅我对的回答，以获得对这两个概念的极其深入的解释，以及为什么会出现这样的限制


您还可以多次使用
，
将任意多个选择器组合在一起，但这与组合器的概念是不同的。不同之处在于，组合符将元素链接在一起，形成一个表示单一内聚结构的复杂选择器，而为了方便起见，逗号将多个复杂选择器组合成一个CSS规则