html - これらのセレクターの違いは何ですか?

Question

http://www.w3.org/TR/selectors/#selectorsに次のような記述があるのですが、よく理解できませんでした。それは何ですか？

E + F   an F element immediately preceded by an E element 
E > F   an F element child of an E element 

Answer 1

<e></e><f></f>  — an F element immediately preceded by an E element
<e><f></f></e>  — an F element child of an E element

Answer 2

<div>
  <span id="A"></span>
</div>
<div id="B"></div>

E + F<div>id と一致しBます。

E > F<span>id と一致しAます。

したがって、違いは、要素Fが要素の兄弟または子であるかどうかEです。

Answer 3

• 隣接するセレクターE + F:

これにより、同じネスト レベルで要素の隣にあるF要素が選択されます。例えば：E

    .a + .b { background-color:blue; }

    <div class='a'>.....</div>
    <div class='b'>This will be blue, because it is next to the 'a' element.</div>

注: 兄弟セレクター と混同しないでくださいE ~ F。どちらもドキュメント内の同じ入れ子レベルにある要素に適用されますが、+具体的には、それらが互いに隣接している必要があることを意味します~が、兄弟要素であるため、 と~の間に別の要素が存在する可能性がaありb、それでも機能しますが、のために+。

• 子セレクターE > F:

これにより、要素の内側にある要素、つまり 1 つ深いネスト レベルのF要素が選択されます。例えば：E

    .c > .d { background-color:red; }

    <div class='c'>
        <div class='d'>This will be red, because it is immediately inside the 'c' element.</div>
    </div>

E F注:相互にネストされた要素を参照する子孫セレクター と混同しないでください。ただし、ネストの任意のレベルに適用できます。そのため、と の間に.c .dネストされた要素がさらに存在する可能性があり、それでも機能しますが、 では機能しません。cd.c > .d

それがあなたのために物事を明確にすることを願っています.