ホームページ > 記事 > ウェブフロントエンド > 特定の要素の直前の要素を選択する方法: CSS の「 」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?
特定の要素の直前の要素を選択する方法: CSS の「 」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?
- Mary-Kate Olsenオリジナル
- 2024-10-26 18:30:30979ブラウズ
隣接する兄弟セレクター: div p (プラス) と div ~ p (チルダ) の違いを理解する
CSS セレクターを使用する場合、 div p (プラス) セレクターと div ~ p (チルダ) セレクターの違いを理解することが重要です。これらは似ていますが、意味は大きく異なります。
div p (Plus) セレクター
div p セレクターは、すべての
を選択します。
の直後に配置される要素要素。これは、
が要素は、先行する
の直接の兄弟である必要があります。
div ~ p (チルダ) セレクター
div p セレクターとは異なり、div ~ p セレクターはすべての
を選択します。
が前にある要素要素。これには、直接の兄弟だけでなく、他のすべての
も含まれます。
の後に続く要素
正しいセレクターの選択
特定の要素の直前に配置された要素の選択に関するクエリに対処するには、次の構文を使用する必要があります。
E1 E2
このセレクターは、要素 E1 の直前にある要素 E2 と一致します。あなたの場合、 div p を使用して
を選択します。隣接する
要素の前にある要素要素。
例
次の HTML および CSS コードを考えてみましょう:
<code class="html"><div id="container">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p>This will be red</p>
<p>This will be black</p>
<p>This will be black</p>
</div></code>
<code class="css">ul + p {
color: red;
}</code>
この例では、
以上が特定の要素の直前の要素を選択する方法: CSS の「 」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。