3

CSS3 セレクターに関するW3C ドキュメントを読んだ後、私はまだ少し混乱しています。EF セレクターと E ~ F セレクターの違いは何ですか。

E   F   an F element descendant of an E element
E ~ F   an F element preceded by an E element

私の意見では、それらはまったく同じです。

4

5 に答える 5

4 
E F

Fの子 (子孫) である Element を選択しEます。したがって、ネストされた構造があり、Eは の親(祖先) ですF。

<!-- E F will match: -->
<e>
  <f></f>
</e>

これは、が直接の子であるE > F場合にのみ一致する(間に他の要素がない)と似ています。FE

その間

E ~ F

Felementが先行する Element を選択しますE。この場合、ネストされていない構造があり、ESiblingsです。F

<!-- E ~ F will match: -->
<e></e>
<f></f>

これも に似てE + Fいますが、ここでは、直接F続く必要がありますE(間に他の要素はありません)。

于 2013-01-07T12:31:25.710 に答える
3

後者では、「E」と「F」の 2 つの要素は、親/子孫ではなく、兄弟でなければなりません。

これは一致しE Fます：

<e> ... <f> </f> ... </e>

そしてこれは一致しますE ~ F

<e> </e> ... <f> </f>

どちらの場合も、選択されるのは要素 "F" です。要素 "E" は、どの要素 "F" を制約するためだけに機能します。

于 2013-01-07T12:30:37.067 に答える
2

ここで混乱を招くのは家系図の比喩 (「子」、「親」、「子孫」など) です。それでは、それなしで問題を見てみましょう：

要素はサブ要素を持つことができます。たとえば、リスト (または)li内のリスト項目 ( )はそのサブ要素です。セレクターは、一致する要素と一致し、のサブ要素です。セレクターは非常に異なります: 一致する要素が要素Xのサブ要素である場合に一致するため、Xにも一致するサブ要素があり、一致するものに先行します。単純な型セレクターを考えると、これは次のようなことを意味しますulolE FFEE ~ FFEF

<X>...<E>...</E>...<F>this matches E ~ F</F>...</X>

ドキュメント ツリーに関しては、通常どおりルートが一番上にあるように視覚化されます。これは、 が構造内の直下E Fの anに一致するのに対し、 an と同じレベルの同じブランチにあり、その前にある an に一致することを意味します。FEE ~ FFE

于 2013-01-07T12:49:41.793 に答える
1

前者は、E の子孫であるすべての F を選択します。後者は、E の兄弟であり、その後の任意の時点に出現するすべての F を選択します。

違いは、最初のケースでは F は E内のどこかになければならないのに対し、2 番目のケースでは Fは Eの親の直接の子でなければならないということです。

実際、F 要素がE 要素内にある場合、E の親の直接の子になることは不可能です。これは、2 つのセレクターが異なるだけでなく、相互に排他的であることを意味します。

例E F:

<e> <f> <f> </e>
    _______

例E ~ F:

<e> </e> <g> </g> <f> </f>
                  ________
于 2013-01-07T12:31:40.157 に答える
1

答えは質問にあります：

<p>
    <span id="1"></span>
</p>
<span id="2"></span>

p span{
    /* this matches the span with id=1 */
}
p ~ span{
    /* this matches the span with id=2 */
}

したがって、最初のケース ( p span) では、pはスパンの親です。
2 番目のケース ( p ~ span) では、pはスパンの兄弟です。

于 2013-01-07T12:32:39.737 に答える