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

Question

例如，div > p可用于选择所有 <p> <div> 的直接子元素元素。使用 div > p > span 是否有效选择 <span>具有 <p> 的元素 parent 和一个<div>祖 parent ？

CSS 选择器中的其他运算符呢？在 div + p + span 中使用“+”是否有效或 ',' 在 div, p, span ？

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

Answer 1

请注意，选择器不使用术语“运算符”。 >和 +符号更准确地称为 combinators , 而逗号只是用于 group selectors into a list 的符号, 并且不属于与 > 相同的类别和 +组合器。

从选择器级别 4 开始，组合器定义了两个元素之间的关系，因此它们确实是二元的。你确实可以使用 >或 +连续多次提到祖 parent 或其他相邻的 sibling 。例如，div > p > span代表以下 HTML 片段:

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

和div + p + span代表以下片段:

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

您还可以混合和匹配组合器来表示更复杂的结构。例如，div + p > span代表 <span>其 parent 是<p>依次直接跟随 <div> ，如以下片段所示:

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

切换组合器，div > p + span代表 <span>直接跟在 <p> 之后这又是 <div> 的 child :

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

请注意这意味着两者 <span>和 <p>是同一个 child <div> .

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

---

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