CSS セレクター「div p」と「div ~ p」の違いは何ですか?

'div p' と 'div ~ p' セレクターの区別

CSS の世界では、'div p のような隣接する兄弟セレクター' および 'div ~ p' は、特定の要素の直後または直前に位置する要素をターゲットにするために使用されます。ただし、これらのセレクター間の微妙な違いを理解すると、混乱する可能性があります。

'div p': 直接兄弟

'div p' セレクターは、特に要素 ('p ') は、'div' 要素に直接隣接しています。これは、「p」要素が「div」要素の直後に出現する場合、それがこのルールによって選択されることを意味します。ただし、他の要素 (見出し、リスト、テキストなど) が 'div' 要素と 'p' 要素の間にある場合、ルールは適用されません。

'div ~ p': All即時を除く兄弟

対照的に、'div ~ p' セレクターは、間に要素があるかどうかに関係なく、'div' 要素の後に現れるすべての 'p' 要素を対象とします。したがって、「div p」セレクターは「div」の直後にある最初の「p」要素のみを選択しますが、「div ~ p」セレクターは後続のすべての「p」要素も選択します。

別の要素の前に要素を選択する

特定の要素の直前にある要素をターゲットにすることが目的の場合、これらの隣接する兄弟セレクターのいずれも十分ではありません。代わりに、「プラス記号付きの隣接兄弟セレクター」 (「X Y」) を使用する必要があります。

構文: E1 E2

説明:

• E1 は一致する要素を表します。
• E2 は E1 より前にある必要がある要素を表します。

特定のシナリオの場合「div」要素の直前に配置された要素を選択する場合は、次の CSS を使用できます:

<code class="css">E + div {
    ...
}</code>

以上がCSS セレクター「div p」と「div ~ p」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。