CSS 近接セレクタープロパティガイド: + および ~-CSSチュートリアル-php.cn

CSS 近接セレクタープロパティガイド: + および ~

PHPz

リリース： 2023-10-20 18:24:20

オリジナル

1008 人が閲覧しました

CSS 邻近选择器属性指南：+ 和 ~

CSS 近接セレクタープロパティガイド: および ~

CSS 近接セレクターは、および ~ を含む隣接する要素を選択するために使用されるプロパティです。

セレクターは、指定された要素の直後にある最初の隣接要素を選択するために使用されます。 HTML 構造では、同じ親要素の 2 つの兄弟要素を隣接要素と呼びます。

##セレクターは、指定された要素の後に隣接するすべての要素を選択するために使用されます。

これらの近接セレクタープロパティを使用して、ページ要素間のスタイルを柔軟に制御します。以下では、具体的なコード例を通じて、および ~ セレクターの使用法を示します。

まず、一連の隣接する

要素を含む単純な HTML ドキュメントを作成します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: gray;
        }
        .box:hover {
            background-color: red;
        }
        .box + .box {
            background-color: blue;
        }
        .box ~ .box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、最初に次の名前の CSS クラスを作成します。ボックスが定義されており、div 要素の幅、高さ、下マージン、および背景色が定義されます。マウスがボックス要素の上に移動すると、背景色を赤に変更するために使用される :hover 疑似クラスも定義します。

次に、セレクターを使用して、最初に隣接する要素の背景色を青として定義します。これは、最初のボックス要素の後の 2 番目のボックス要素の背景色が青になることを意味します。

次に、~ セレクターを使用して、最初のボックス要素の後に隣接するすべての要素の背景色を緑色に定義します。これは、最初のボックス要素の後の 2 番目、3 番目、および 4 番目のボックス要素の背景色がすべて緑色に変わることを意味します。

上記のコードを保存して実行すると、ページ内のボックス要素が定義したスタイルに従ってレンダリングされることがわかります。マウスをボックス要素の上に置くと、その背景色が赤に変わります。最初のボックス要素の直後にある 2 番目のボックス要素の背景色が青に変わり、他のボックス要素の背景色が緑に変わります。

これは、および ~ 隣接するセレクター属性を使用した基本的な使用例です。特定のニーズやページ構造に応じて柔軟に使用して、より多様な効果やレイアウトを実現できます。

要約すると、CSS 近接セレクタープロパティは、隣接する HTML 要素を選択してスタイル設定する便利な方法を提供します。セレクターを使用すると、指定した要素の直後にある最初の隣接要素を選択でき、~ セレクターを使用すると、指定した要素の後に隣接するすべての要素を選択できます。これらのセレクタープロパティを使用すると、より詳細な制御が可能になり、より複雑で豊富なページレイアウトとスタイル効果を作成できるようになります。

この記事が、CSS 近接セレクタープロパティの理解と適用に役立つことを願っています。ご質問がございましたら、メッセージを残してご相談ください。

以上がCSS 近接セレクタープロパティガイド: + および ~の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。