CSS の隣接兄弟コンビネータ ( ) はどのように機能しますか?

CSS 隣接兄弟コンビネータについて:

CSS では、シンボルは隣接兄弟コンビネータとして知られています。これにより、互いに隣接して配置されている特定の HTML 要素をターゲットにすることができます。

コンビネータはどのように機能しますか?

コンビネータは、ターゲット要素 (2 番目の要素) が確実にセレクター内の要素) は、最初の要素 (セレクター内の最初の要素) の直後に続く必要があります。セレクターが一致するには、2 つの要素の間に他の要素があってはなりません。

例: h2 p

次の CSS ルールを検討してください:

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

このルールは、h2 要素に隣接するすべての p 要素を対象とします。つまり、h2 要素の直後にある p 要素にのみ影響します。

図

次の HTML コードを例に挙げます。

<code class="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></code>

最初の p 要素のみが h2 p セレクターによって選択されます。これは、h2 に隣接しているためです。 2 番目の p 要素は、

によって h2 から区切られているため、選択されません。同じブロック内で直前に h2 要素がないため、blockquote 内の p 要素も選択されません。

一般的な兄弟コンビネータとの違い ~

とは異なりますコンビネータ、一般的な兄弟コンビネータ ~ は隣接する配置を必要としません。互いの位置に関係なく、兄弟である要素を選択します。

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