E&F和E + F选择器之间的区别？ [英] Difference between E>F and E+F selectors?

问题描述

我在jQuery中阅读：

I read in jQuery that:

E> F 具有 E 的直接子级的 F 。

E + F 匹配标记名为 F 的所有元素，立即
标签名 E 。

E+F matches all elements with tag name F that are immediately preceded by a sibling of tag name E.

两者之间有什么区别？

What is the difference between both? Can one provide a clear and concrete example?

推荐答案

首先，因为jQuery借用 / code>和 + ，它们的行为方式与 Selectors spec ;请参阅子组合器和邻近的同级组合器。

First off, as jQuery borrows both > and + from CSS, they behave the same way as described in the Selectors spec; see child combinator and adjacent sibling combinator.

儿童是指嵌套在另一个元素中一个级别的元素。为了强调立即嵌套的限制，这些可以被称为直接孩子，如在文档中，但它们意味着相同。包含在任何嵌套深度中的元素被称为后代;

"Children" refer to elements nested one level within another element. To emphasize the restriction of immediate nesting these may be referred to as "immediate children", as in the documentation, but they mean the same. Elements contained in any nesting depth are known as "descendants"; this includes children, grandchildren, great grandchildren and so on.

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

The selector E>F will only match the F element in the following structure:

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

但不是在以下结构中（将匹配 EF ， D> F 或 E> D> F ）：

But not in the following structure (which would be matched by E F, D>F or even E>D>F instead):

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

更真实的插图可以在这个答案。

A more real-world illustration can be found in this answer. As mentioned, although it covers CSS, it's the same since jQuery borrows it from CSS anyway.

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

"Siblings" refer to elements on the same nesting level; i.e. elements that are children of the same parent element. There can be next/following siblings and previous/preceding siblings as long as they all share the same parent, but in this case, "F elements that are immediately preceded by E elements" refers to F elements that come immediately after E elements, with no other sibling elements between them.

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

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

但不是在以下结构中（将匹配 E〜F ， D + F <代替：code>或甚至 E + D + F ）：

But not in the following structure (which would be matched by E~F, D+F or even E+D+F instead):

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

更真实的插图可以在此答案。

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

Finally, here's a more complex scenario with a variety of elements, showing which F elements are matched by which of the above selectors for comparison:

<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>

这篇关于E&F和E + F选择器之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！