E>F 和 E+F 选择器的区别？

Question

我在 jQuery 中读到：

E>F 匹配标签名称为 F 且是 E 的直接子级的所有元素。

E+F 匹配标签名称为F 的所有元素 前面是标签名称 E 的兄弟姐妹。

两者有什么区别？谁能提供一个清晰而具体的例子？

Answer 1

首先，由于 jQuery 从 CSS 中借用了 > 和 +，它们的行为方式与 Selectors spec 中描述的方式相同；见child combinator 和adjacent sibling combinator。

---

“子元素”是指嵌套在另一个元素中的一级元素。为了强调直接嵌套的限制，这些可能被称为“直接子代”，如文档中所示，但它们的含义相同。任何嵌套深度中包含的元素都称为“后代”；这包括孩子、孙子、曾孙等。

选择器E>F 只会匹配以下结构中的F 元素：

<E>
  <F></F>
</E>

但不在以下结构中（将由E F、D>F 甚至E>D>F 匹配）：

<E>
  <D>
    <F></F>
  </D>
</E>

更真实的插图可以在this answer 中找到。如前所述，虽然它涵盖了 CSS，但它是相同的，因为 jQuery 无论如何都是从 CSS 中借用它的。

---

“兄弟”指的是同一嵌套级别的元素；即作为同一父元素的子元素的元素。可以有下一个/下一个兄弟姐妹和上一个/前一个兄弟姐妹，只要它们都共享相同的父级，但在这种情况下，“F 紧跟在 E 元素之前的元素”指的是 F 元素紧跟在E 元素之后，它们之间没有其他兄弟元素。

选择器E+F 只会匹配以下结构中的F 元素：

<E></E>
<F></F>

但不在以下结构中（将由E~F、D+F 甚至E+D+F 匹配）：

<E></E>
<D></D>
<F></F>

更真实的插图可以在this answer 中找到。

---

最后，这里有一个更复杂的场景，包含各种元素，显示了哪些F 元素与上面的哪个选择器匹配以进行比较：

<root>
  <D>
    <F></F>   <!-- Not matched -->
  </D>
  <E>
    <E>
      <F></F> <!-- E>F only -->
    </E>
    <F></F>   <!-- E>F, E+F -->
  </E>
  <F></F>     <!-- E+F only -->
</root>

Answer 2

E > F = 父级 > 选中

<parent>
    <selected />
</parent>

E + F = previous_sibling + selected

<parent>
    <preceding_sibling />
    <selected />
</parent>

Answer 3

下面的 DOM 结构应该向你解释兄弟和孩子之间的区别：

-- Element
-- Sibling
-- Sibling
  -- Child
  -- Another Child
-- Sibling

Answer 4

$('E>F').css({fontWeight:'bold'}); = E 的 F 直系子代

粗体字
// 这里 'F' 不是 E 的直接子级

$('E+F').css({fontWeight:'bold'}); = F 像 E 的下一个兄弟

粗体字

// 这里'F'前面没有E

PLAYGROUND