[CSSチュートリアル】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>

// corresponding CSS code for controlling BCD with A
    .A:hover + .B{
        background-color: orange;
    }
    .A:hover + .B+ .C{
        background-color: orange;
    }
    .A:hover + .B+ .C+ .D{
        background-color: orange;
    }

Aを別の位置に変更すると動作しない。また、CSSのボトムコントロールコードを書くだけでは、3番目の要素のスタイル変更しか制御できず、複数の要素が一緒に変更されることはない。

AはBCDの親......親子関係です

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

// corresponding CSS code
    .A:hover .B{
        background-color: orange;
    }
    .A:hover .B+ .C{
        background-color: orange;
    }
    .A:hover .B+ .C+ .D{
        background-color: orange;
    }

最初のものは、実際には、よく理解されている、要素+要素は、隣接する要素を制御することですので、AとCDが直接隣接していないので、私は、検索の最初のレベルに移動しますBに最初に、BCが隣接しているので、私は制御を開始するには、同じようにDに制御することができますに行くことができます

そして、2番目のコードは、要素の要素は、親ノードが子ノードを制御する方法です、あなたがCを制御する必要がある場合は、最初にBCが隣接しているので、後にBに求める、私はその後、C、Dと同じを制御する隣接する要素の制御方式に行くことができる。

CSS疑似要素を使って、複数の要素のスタイルを一列に制御することについては、この記事がすべてです、もっと関連するCSS疑似要素を使って、要素の内容を制御するには、House of Scriptsの過去の記事を検索するか、次の関連記事を参照してください、私はあなたがHouse of Scriptsを今後サポートしてくれることを願っています！。