CSS \' \' コンビネータはどのように隣接する兄弟要素を選択するのでしょうか?

隣接する兄弟の選択: CSS ' ' コンビネータの探索

CSS では、' ' 文字が隣接する兄弟コンビネータの役割を果たします。 。この多用途演算子を使用すると、特定の兄弟要素の直前にある要素をターゲットとするセレクターを指定できます。

その機能を説明するために、次の CSS ルールを詳しく見てみましょう。

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}

Thisルールは、「h2」ヘッダーに直接続くすべての「p」要素を対象とします。この条件を満たす要素は、フォント サイズの拡大、太字の太さ、#777 色など、指定されたスタイル プロパティを継承します。

例として、次の HTML 構造を考えてみましょう。

<h2>Headline!</h2>
<p>The first paragraph.</p> <!-- Selected -->
<p>The second paragraph.</p> <!-- Not selected -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p> <!-- Not selected -->
</blockquote>

CSS セレクター「h2 p」は、「Headline!」というラベルの付いた「h2」ヘッダーのすぐ隣にある最初の「p」要素のみを選択します。これは、例では「[1]」で示されています。一方、2 番目の 'p' 要素は、'h2' が直接前にないため、'[2]' は選択されません。

さらに、隣接する兄弟コンビネータを以下と組み合わせて使用​​できます。一般的な兄弟コンビネータ「~」。これにより、より柔軟なマッチングが可能になります。たとえば、セレクター 'h2 ~ p' は、すぐに隣接しているかどうかに関係なく、'h2' ヘッダーの後に出現するすべての 'p' 要素と一致します。

本質的に、CSS の隣接兄弟コンビネータは次のことを可能にします。兄弟との相対的な位置に基づいて HTML 要素を正確に選択できるため、スタイルとレイアウトをきめ細かく制御できます。

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