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