Wie wähle ich das erste Vorkommen eines bestimmten Klassenelements in unterschiedlichen Strukturen aus?

Auswählen des ersten Vorkommens eines bestimmten Klassenelements

Das Auswählen des ersten Vorkommens eines bestimmten Klassenelements kann bei Struktur und Element eine Herausforderung sein Die Anzahl innerhalb des übergeordneten Elements variiert. In diesem Fall tritt das Problem auf, wenn versucht wird, das erste Element mit der Klasse „A“ innerhalb eines Elements mit der ID oder der Klasse „B“ auszuwählen.

Mit CSS3 die Herausforderung meistern

CSS3 bietet die Pseudoklasse :first-of-type, die auf das erste Element eines bestimmten Typs unter seinen Geschwistern abzielt. Es gibt jedoch kein Äquivalent: erstklassige Pseudoklasse.

Eine Workaround-Lösung

Als Workaround kann man den allgemeinen Geschwisterkombinator (~ ) und wenden Sie eine übergeordnete Regel an, um die ursprünglichen Stile, die auf alle .A-Elemente innerhalb des .C-Elements angewendet wurden, „rückgängig zu machen“.

Der CSS-Code

Der folgende CSS-Code bietet die Lösung:

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

Dieser Code wendet Stile auf alle .A-Elemente an, die Enkel von .C sind. Darüber hinaus überschreibt es die Stile für nachfolgende .A-Elemente, die auf das erste .A-Kindelement jedes Elements unter .C folgen.

Beispielillustration

Beachten Sie die folgende HTML-Struktur :

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

In diesem Szenario:

• Das erste .A-Element würde die von der ersten Regel angewendeten Stile erhalten.
• Das zweite .A-Element, Nach der ersten Regel würden die überschriebenen Stile empfangen, die von der zweiten Regel angewendet werden.

Browserkompatibilität

Der ~-Selektor wird von IE7 und höher erkannt bedeutet, dass diese Lösung breite Unterstützung findet. Der einzige große Browser, bei dem es fehlschlägt, ist IE6.

Durch die Implementierung dieser Problemumgehung können Entwickler das erste Vorkommen eines bestimmten Klassenelements gezielt ansprechen und formatieren, selbst wenn die Struktur und die Elementanzahl innerhalb des übergeordneten Elements variieren.

Das obige ist der detaillierte Inhalt vonWie wähle ich das erste Vorkommen eines bestimmten Klassenelements in unterschiedlichen Strukturen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!