CSS の \' \' コンビネータはどのように兄弟の直後の要素をターゲットにするのでしょうか?

CSS の " " コンビネータを理解する

CSS は、特定の兄弟の直後に続く要素を対象とするために " " コンビネータを使用します。たとえば、ルール「h2 p」では、h2 要素の直後の p 要素のみが、指定されたスタイルの影響を受けます。

コンセプトの視覚化

検討次の HTML コード:

<code class="html"><h2 id="Headline">Headline!</h2>
<p>The first paragraph.</p> <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2 id="Another-headline">Another headline!</h2>
<blockquote class="quote">
    <p>A quotation.</p> <!-- Not selected [3] -->
</blockquote></code>

「h2 p」セレクターを適用する場合:

• [1] 最初の段落 (

  ) h2 (

  ) 要素の直後にあるため選択されます。

• [2] 2 番目の段落 (

  ) は最初の段落に続くため選択されません。 h2 要素ではありません。

• [3] blockquote (

  ) 内の段落は、blockquote 内でその前に h2 がないため選択されません。

"~" コンビネータとの比較

" " コンビネータは、兄弟要素に関係なくすべての兄弟要素を選択する "~" コンビネータとは異なり、直接の兄弟である要素のみを明確に選択します。位置。たとえば、「h2 ~ p」は上記の HTML の両方の段落を選択しますが、「h2 p」は最初の段落のみを選択します。

以上がCSS の \' \' コンビネータはどのように兄弟の直後の要素をターゲットにするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。