1

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/によると、セレクターはE ~ F「E 要素が先行する F 要素」に一致します。これが 1 つの F だけを意味するのか、それとも E が先行する任意の F を意味するのかについて、私は混乱しています。

たとえば、セレクターは次のようにする必要があります。

E ~ F.blah

E が前にあり、クラス "blah" を持つ最初の F のみに一致するか、またはそのようなすべての要素に一致しますか?

4

1 に答える 1

3

同じ親の下にある限り、そのような要素のすべてに一致します。

隣接する兄弟コンビネータとは異なり、+一般的な兄弟コンビネータで~は、要素が別の要素の直後に続く必要はありません。そのような位置制限~がないため、最初の一致のセマンティクスはありません。(実際、どちらもそうではありませんが+、その意味ではさらに制限されています。以下を参照してください。)

これはまた、要素が一致する場合、E + F.blah定義上も一致する必要があることを意味しますE ~ F.blah。逆に、一致するすべての要素E ~ F.blahが にも一致するわけではありませんE + F.blah。

実例:

<E></E>
<D>
    <F class="blah"></F> <!-- Not selected [1] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [2] -->
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <F></F>
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [4] -->
</D>
<D>
    <F class="blah"></F> <!-- Not selected [5] -->
</D>

選択されたものと選択されていないもの:

  1. 未選択
    この F 要素のクラスは「何とか」ですが、親 D の E 要素が前にありません。

    最上位の E は、F ではなく D の前の兄弟であるため、カウントされないことに注意してください。

  2. Selected by E + F.blahandE ~ F.blah
    この F 要素は、親 D の E 要素の前にあり、クラス "blah" を持っているため、 selector と一致しE ~ F.blahます。

    E 要素はこの F 要素の直前にあるため、 にも一致しE + F.blahます。

  3. E ~ F.blah
    この F 要素は、その親 D の要素の前にあり、クラスE"blah" を持っています。ただし、この場合の E は直前の兄弟ではなくなり、この要素は一致しませんE + F.blah。

  4. この F 要素の直前E + F.blahにE ~ F.blah
    最初の E 要素はありませんが、その直前に 2 番目の E 要素があるため、これも一致しE + F.blahます。

    ちなみに、この要素は selector には一致しますが、 selector には一致しませE:first-of-type ~ F.blah んE:first-of-type + F.blah。これは、前の兄弟 E がそのタイプの最初ではなく、2 番目であるためです。

  5. 選択されていません
    この F 要素はクラス "blah" を持っていますが、例のすべての E 要素とは異なる親 D にあるため (およびその唯一の子であるため)、親 D の E 要素が前にありません。

価値があるのは、一致する最初の要素だけを選択することはできませんE ~ F.blah(それが にも一致E + F.blahする場合を除きます。その場合は代わりにそれを使用できます)。ただし、CSS ルールを適用する場合は、オーバーライドを使用して実現できます — 兄弟コンビネータを繰り返すだけです。

E ~ F.blah {
    /* Styles for first and following E ~ F.blah */
}

E ~ F.blah ~ F.blah {
    /* Styles for only F.blah following the first E ~ F.blah */
}
于 2012-10-20T08:47:21.227 に答える