javascript - E>F セレクターと E+F セレクターの違いは?

Question

私はjQueryで次のことを読みました：

E>FFの直接の子であるタグ名を持つすべての要素に一致しますE。

E+FFtag nameの兄弟が直前にあるtag name を持つすべての要素に一致しますE。

両者の違いは何ですか？明確で具体的な例を提供できますか?

Answer 1

まず、jQuery は>とCSS の両方を借用しているため、セレクタ仕様+で説明されているのと同じように動作します。子コンビネータと隣接する兄弟コンビネータを参照してください。

---

「子」とは、あるレベルで別の要素内にネストされた要素を指します。直接のネストの制限を強調するために、これらはドキュメントのように「直接の子」と呼ばれることがありますが、意味は同じです。ネストの深さに含まれる要素は「子孫」と呼ばれます。これには、子、孫、ひ孫などが含まれます。

セレクターは、次の構造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 = 先行する兄弟 + 選択済み

<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'});= E の次の兄弟のような F

<E></E>
<F>太字</F>
<A></A>
<F></F> // ここでは、'F' の前に E はありません

遊び場