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

Question

我在jQuery中读到:

E>F匹配标签名称F为直接子项的所有元素E.

E+F匹配标签名称F前面紧跟标签名称兄弟的所有元素E.

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

Answer 1

首先,当jQuery借用CSS >和+CSS时,它们的行为方式与Selectors规范中描述的相同; 看儿童组合子和相邻的兄弟组合子.

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

选择器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>