特定の H1 要素の直後にある段落のみに CSS を使用してスタイルを設定するにはどうすればよいですか?

CSS 隣接兄弟セレクターを理解する

HTML 要素をスタイル設定する場合、その関係に基づいて特定の要素をターゲットにする機能が重要です。ここで、CSS 隣接兄弟セレクターが登場します。

問題ステートメント

次の HTML および CSS コードを考えてみましょう:

<h1>

目標すべての

が確実に行われるようにすることです。 h1.hc-reform 要素に続くタグには、clear プロパティがあります: Both.

不正な試行

実行された試行:

h1.hc-reform > p {
  clear: both;
}

> が原因で機能しません。 selector は直接の子要素のみを選択します。この場合、

タグは h1.hc-reform 要素の直接の子ではありません。

隣接兄弟セレクター

望ましい結果を達成するには、隣接兄弟セレクターを使用する必要があります。プラス記号 ( ) で表されます。

h1.hc-reform + p {
  clear: both;
}

このセレクターは、指定された要素の直後にある要素を対象とします。この場合、

h1.hc-reform 要素の直後にタグを追加します。

注: 隣接兄弟セレクターは、Internet Explorer 6 以前のバージョンではサポートされていません。

以上が特定の H1 要素の直後にある段落のみに CSS を使用してスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。