javascript - Difference between E>F and E+F selectors? - Stack Overflow

admin管理员组

文章数量:1310169

I read in jQuery that:

E>F matches all elements with tag name F that are direct children of 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?

I read in jQuery that:

E>F matches all elements with tag name F that are direct children of 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?

• javascript
• jquery
• jquery-selectors
• css-selectors

Share Improve this question Follow edited Jul 15, 2012 at 16:24 BoltClock 725k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Jul 15, 2012 at 16:22 Jérôme VerstryngeJérôme Verstrynge 59.6k9696 gold badges295295 silver badges466466 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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

---

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

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

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

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" 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 e immediately after E elements, with no other sibling elements between them.

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

<E></E>
<F></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>

A more real-world illustration can be found in this answer.

---

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

<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 = parent > selected

<parent>
    <selected />
</parent>

E + F = preceding_sibling + selected

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

The following DOM structure should explain the difference between sibling and child to you:

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

$('E>F').css({fontWeight:'bold'}); = F immediate children of E

<E>
<F>Bold text</F>
<A><F></F></A> // here 'F' is not immediate children of E
</E>

$('E+F').css({fontWeight:'bold'}); = F like next sibling of E

<E></E>
<F>Bold text</F>
<A></A>
<F></F> // here 'F' is not preceded by E

PLAYGROUND

本文标签： javascriptDifference between EgtF and EF selectorsStack Overflow