特定の要素の直前の要素を選択する方法: 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 までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1686

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1840

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1565

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1471

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1523

関連トピック

詳細>

• JDK環境変数を構成する方法
• Windows の休止状態とスリープの違い
• CSSが読み込めない場合の対処法
• Linuxでフォルダーを削除する方法
• MySQLのELT機能の使い方の紹介
• コンピューター上の「NTLDR が見つかりません」エラーを解決する方法
• Oracleデータベースのリカバリ方法
• Kingsoft ドキュメントから Excel ファイルをエクスポートする方法