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

CSS 隣接兄弟コンビネータ: プラス記号について

CSS では、プラス記号 ( ) が隣接兄弟コンビネータとして使用されます。これは、特定の要素の直後に続く要素を選択することを意味します。

例:

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

このルールでは、h2 p セレクターは、直接来るすべての p 要素を対象とします。 h2 要素の後。

仕組み:

隣接する兄弟コンビネータにより、選択された要素が次のようになります:

• 前の要素に続く
• 同じ親要素を共有します。

図:

次の 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>

結果:

• 選択: h2 要素の直後にあるため、最初の p 要素。
• 未選択: h2 要素の直後にないため、2 番目の p 要素。
• 未選択: h2 要素が続かないため、ブロック引用符内の p 要素。

使用法:

隣接兄弟コンビネータは、ドキュメント内の要素の特定のシーケンスをスタイル設定するのに役立ちます。たとえば、

• 見出しに続く視覚的に区別できる段落をレンダリングします。
• 表内の交互の行を強調します。
• ナビゲーション リンクに隣接するドロップダウン メニューを作成します。

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