ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で別の要素の直前の要素を選択するにはどうすればよいですか?
CSS で別の要素の直前の要素を選択するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-10-29 05:50:31520ブラウズ
div p と div ~ p の違いを理解する
CSS セレクターでは、プラス ( ) 演算子とチルダ (~) 演算子は両方とも選択を行います。指定された要素の兄弟要素。ただし、それらの動作は、兄弟に対する要素の位置に基づいて異なります。
div p (隣接兄弟セレクター)
このセレクターは、すべての
に一致します。
の直後の要素要素。例:
div + p {
color: red;
}
この場合、各
に続く最初の段落のみが表示されます。
div ~ p (一般兄弟セレクター)
このセレクターはすべての
に一致します。
が前にある要素要素の位置に関係なく。例:
div ~ p {
color: blue;
}
この場合、
の後に続くすべての段落が対象となります。
質問の明確化
この質問では、指定された要素の直前に配置される要素を選択するセレクターが求められます。これは、div p または div ~ p セレクターでは実現できません。
先行要素の隣接兄弟セレクター
別の要素の直前にある要素を選択するには、次のようにします。隣接する兄弟セレクターを逆の順序で使用できます:
X Y
この構文では、X が先行要素であり、Y はセレクターの主題です。例:
p + ul {
color: green;
}
このセレクターは、各段落の後の最初の順序なしリストにのみ緑色のテキストを適用します。
以上がCSS で別の要素の直前の要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。