ホームページ > 記事 > ウェブフロントエンド > CSS の \" \" コンビネータはどのように兄弟の直後の要素をターゲットにするのでしょうか?
CSS の " " コンビネータを理解する
CSS は、特定の兄弟の直後に続く要素を対象とするために " " コンビネータを使用します。たとえば、ルール「h2 p」では、h2 要素の直後の p 要素のみが、指定されたスタイルの影響を受けます。
コンセプトの視覚化
検討次の HTML コード:
<code class="html"><h2>Headline!</h2> <p>The first paragraph.</p> <!-- Selected [1] --> <p>The second paragraph.</p> <!-- Not selected [2] --> <h2>Another headline!</h2> <blockquote class="quote"> <p>A quotation.</p> <!-- Not selected [3] --> </blockquote></code>
「h2 p」セレクターを適用する場合:
) h2 (
) は最初の段落に続くため選択されません。 h2 要素ではありません。
) 内の段落は、blockquote 内でその前に h2 がないため選択されません。
"~" コンビネータとの比較
" " コンビネータは、兄弟要素に関係なくすべての兄弟要素を選択する "~" コンビネータとは異なり、直接の兄弟である要素のみを明確に選択します。位置。たとえば、「h2 ~ p」は上記の HTML の両方の段落を選択しますが、「h2 p」は最初の段落のみを選択します。
以上がCSS の \" \" コンビネータはどのように兄弟の直後の要素をターゲットにするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。