So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern

Wenn Sie CSS-Pseudoelemente zur Steuerung von Elementen verwenden, müssen Sie häufig die Stile einiger Elemente ändern. Im Internet gibt es viele Blogs, in denen beschrieben wird, wie die Änderung eines Elements gesteuert werden kann. Beim eigentlichen Schreiben habe ich jedoch festgestellt, dass ich häufiger die Änderungen mehrerer aufeinanderfolgender Elemente steuern muss.

Verwenden Sie zur Steuerung Pseudoelemente (nehmen Sie als Beispiel :hover). Wenn die Maus auf A bleibt, ändern sich die Stile von BCD...

A und BCD ... liegen nebeneinander und auf derselben Ebene. Daher muss sich A oben auf BCD befinden.

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

//Der entsprechende CSS-Code von A, der BCD steuert. A:hover + .B{
        Hintergrundfarbe: orange;
    }
    .A:schweben + .B+ .C{
        Hintergrundfarbe: orange;
    }
    .A:schweben + .B+ .C+ .D{
        Hintergrundfarbe: orange;
    }

Wenn Sie A an eine andere Position verschieben, wird der Effekt nicht erzielt. Wenn Sie den Steuercode nur am Ende des CSS schreiben, können Sie nur die Stiländerung des dritten Elements steuern und mehrere Elemente können nicht gleichzeitig geändert werden.

A ist BCD ... ist eine Vater-Sohn-Beziehung

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

//Entsprechender CSS-Code.A:hover .B{
        Hintergrundfarbe: orange;
    }
    .A:schweben .B+ .C{
        Hintergrundfarbe: orange;
    }
    .A:schweben .B+ .C+ .D{
        Hintergrundfarbe: orange;
    }

Das erste ist eigentlich sehr einfach zu verstehen, da Element+Element dazu dient, benachbarte Elemente zu steuern. Da A und CD nicht direkt benachbart sind, werde ich eine Ebene nach der anderen durchsuchen, zuerst nach B, da BC benachbart ist, sodass ich mit der Steuerung beginnen kann, und dasselbe gilt für D.

Im zweiten Code ist Element die Methode, mit der der übergeordnete Knoten den untergeordneten Knoten steuert. A kann B direkt steuern. Wenn Sie C steuern müssen, suchen Sie zuerst nach B. Da BC benachbart sind, verwende ich die Methode der benachbarten Elementsteuerung, um C zu steuern. Dasselbe gilt für D.

Damit ist dieser Artikel über die Verwendung von CSS-Pseudoelementen zur Steuerung der Stile mehrerer aufeinanderfolgender Elemente abgeschlossen. Weitere Informationen zu CSS-Pseudoelementen zur Steuerung von Elementen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!