CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法

CSS 疑似要素を使用して要素を制御する場合、一部の要素のスタイルを変更する必要があることがよくあります。インターネット上には、1 つの要素の変更を制御する方法について説明したブログがたくさんありますが、実際の執筆プロセスでは、連続する複数の要素の変更を制御する必要があることの方が多いことがわかりました。

疑似要素を使用して制御します (:hover を例にします)。マウスが A に留まると、BCD のスタイルが変更されます...

AとBCDは隣接しており、同じレベルであるため、AはBCDの一番上にある必要があります。

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>

//BCD を制御する A に対応する CSS コード。A:hover + .B{
        背景色: オレンジ;
    }
    .A:ホバー + .B+ .C{
        背景色: オレンジ;
    }
    .A:ホバー + .B+ .C+ .D{
        背景色: オレンジ;
    }

A を別の位置に移動すると効果が得られません。また、CSS の下部に制御コードのみを記述すると、3 番目の要素のスタイル変更しか制御できず、複数の要素を同時に変更することはできません。

AはBCDです...父と息子の関係です

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>

//対応するCSSコード.A:hover .B{
        背景色: オレンジ;
    }
    .A:ホバー .B+ .C{
        背景色: オレンジ;
    }
    .A:ホバー .B+ .C+ .D{
        背景色: オレンジ;
    }

最初のものは、要素 + 要素は隣接する要素を制御するため、実際には非常に理解しやすいです。A と CD は直接隣接していないため、一度に 1 レベルずつ検索します。まず B を検索します。BC は隣接しているため、制御を開始できます。D についても同様です。

2 番目のコードでは、要素 element は親ノードが子ノードを制御する方法です。A は B を直接制御できます。C を制御する必要がある場合は、まず B を見つけます。BC は隣接しているため、隣接要素の制御方法を使用して C を制御します。D についても同様です。

これで、CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法についてのこの記事は終了です。要素を制御する CSS 疑似要素の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。