特定の要素の直前の要素を選択する方法: CSS の「」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?-CSSチュートリアル-php.cn

特定の要素の直前の要素を選択する方法: CSS の「」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?

Mary-Kate Olsen

リリース： 2024-10-26 18:30:30

オリジナル

1103 人が閲覧しました

How to Select Elements Immediately Before a Given Element: Understanding “ ” (Plus) and “~” (Tilde) Adjacent Sibling Selectors in CSS?

隣接する兄弟セレクター: 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>

ログイン後にコピー

この例では、の直前にある要素要素には赤いテキストが表示されます。これは、ul p セレクターが直接の兄弟のみに一致するためです。

以上が特定の要素の直前の要素を選択する方法: CSS の「」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：iOS デバイスの Firefox および Safari で背景画像が切れるのはなぜですか? 次の記事：CSS の二重枠を削除する方法: アウトラインと負のマージン?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

特定の要素の直前の要素を選択する方法: CSS の「 」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?

特定の要素の直前の要素を選択する方法: CSS の「」 (プラス) と「~」 (チルダ) の隣接する兄弟セレクターについて理解しますか?