要素が選択され、フォントが太字になります。

3. 隣接兄弟セレクター: 隣接兄弟関係を通じて要素を選択します。

h1 + p {  
color: red;
}

上の例では、

要素の直後の

要素が選択され、テキストの色が赤に設定されます。

4. 一般的な兄弟セレクター: 兄弟関係を通じて要素を選択します。

h1 ~ p {  
font-style: italic;
}

ログイン後にコピー

上の例では、

要素の後にあるすべての

要素が選択され、フォント スタイルは斜体に設定されます。

これらのリレーショナル セレクターは、要素をより正確に選択し、要素間の特定の関係に基づいてスタイルを適用するのに役立ちます。リレーショナル セレクターを合理的に使用することで、ページ上の要素のスタイルを柔軟に制御できます。