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

Question

我在 jQuery 中读到：

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

E+FF匹配标签 name紧跟在标签 name 同级之前的所有元素E。

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

Answer 1

首先，由于 jQuery 借用了CSS>和+CSS，它们的行为方式与Selectors 规范中描述的方式相同；请参阅子组合器和相邻的兄弟组合器。

---

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

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

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

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

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

可以在此答案中找到更真实的说明。如前所述，虽然它涵盖了 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>

可以在此答案中找到更真实的说明。

---

最后，这里有一个更复杂的场景，包含多种元素，显示了哪些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 + 选定

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

Answer 3

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

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

Answer 4

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

<E>
<F>粗体文本</F>
<A><F></F></A> //这里的'F'不是E的直接子代
</E>

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

<E></E>
<F>粗体字</F>
<A></A>
<F></F> //这里'F'前面没有E

操场