E＆gt; F和E + F选择器之间的差异？

Question

我在jQuery中读到：

  

E>F匹配标记名为F的所有元素，这些元素都是E的直接子元素。

     

E+F会立即匹配标记名为F的所有元素   之前是标记名E的兄弟。

两者有什么区别？可以提供一个明确而具体的例子吗？

Answer 1

首先，当jQuery从CSS借用>和+时，它们的行为方式与Selectors spec中描述的相同;请参阅child combinator和adjacent sibling combinator。

---

“Children”指的是嵌套在另一个元素中的一个级别的元素。为了强调立即嵌套的限制，这些可以被称为“直系儿童”，如文档中所述，但它们的含义相同。包含在任何嵌套深度中的元素称为“后代”;这包括儿童，孙子女，曾孙子等。

选择器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个元素”是指{{ 1}}紧跟在F元素之后的元素，它们之间没有其他兄弟元素。

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

F

但不是在以下结构中（而是由E~F，<E></E> <F></F> 或甚至D+F匹配）：

E+D+F

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

---

最后，这是一个包含各种元素的更复杂的场景，显示哪些<E></E> <D></D> <F></F> 元素与上述哪个选择器匹配进行比较：

F

Answer 2

E＆gt; F =父＆gt;选择

<parent>
    <selected />
</parent>

E + F = preceding_sibling + selected

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

Answer 3

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

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

Answer 4

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

  

＆LT E - 代替;
  ＆lt; F＆gt;粗体文字＆lt; / F＆gt;
  ＆LT a取代;＆LT f是氟烃基;＆LT; / F＆GT;＆LT; / A＆GT; //这里'F'不是E的直接孩子   
＆LT; / E - 代替;

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

  

＆LT E - 代替;＆LT; / E - 代替;
  ＆lt; F＆gt;粗体文字＆lt; / F＆gt;
  ＆LT a取代;＆LT; / A＆GT;
  ＆LT f是氟烃基;＆LT; / F＆GT; //这里'F'前面没有E

PLAYGROUND