特定の要素の直前の要素を選択する方法: 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？

4週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

Nordhold：Fusion System、説明

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1672

14

CakePHP チュートリアル

1428

52

Laravel チュートリアル

1332

25

PHP チュートリアル

1276

29

C# チュートリアル

1256

24

もっと見る