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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
