Wie kann man das erste Vorkommen einer Klasse innerhalb eines übergeordneten Elements in CSS gezielt ansprechen?

Auswählen des ersten Vorkommens einer Klasse innerhalb eines übergeordneten Elements

In CSS entsteht die Herausforderung, wenn Sie auf das erste Element einer Klasse abzielen müssen bestimmte Klasse innerhalb eines übergeordneten Elements, insbesondere wenn die Klasse in ihren Geschwistern an unterschiedlichen Positionen erscheinen kann. Dieses Problem wird noch komplexer, wenn die Klassen- oder Kinderstruktur des übergeordneten Elements unterschiedlich sein kann.

Die :first-of-type-Pseudoklasse

CSS3 bietet die :first -of-type-Pseudoklasse, mit der Sie das erste Element eines bestimmten Typs innerhalb seiner Geschwister auswählen können. Es gibt jedoch keine entsprechende :first-of-class-Pseudoklasse speziell für die Auswahl des ersten Elements einer bestimmten Klasse.

Eine Problemumgehung mit ~ und General Sibling Selector

Eine Problemumgehung besteht darin, den allgemeinen Geschwisterkombinator (~) zusammen mit einer übergeordneten Regel zu verwenden. Indem Sie die Standardstile kennen, die auf andere Elemente derselben Klasse angewendet werden, können Sie eine spezifischere Regel erstellen, die die Standardstile nur für die Elemente überschreibt, die auf das erste Vorkommen der Zielklasse folgen.

Beispiel :

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

Abbildung:

Bedenken Sie den folgenden HTML-Code Struktur:

<div class="parentClass">
    <div class="someOtherClass">...</div>
    <div class="targetClass">First target</div>
    <div class="targetClass">Second target</div>
    <div class="targetClass">Third target</div>
</div>

In diesem Szenario würde die erste Regel Stile auf alle Elemente mit der Klasse „targetClass“ innerhalb des „parentClass“-Elements anwenden. Die zweite Regel würde diese Stile für alle „targetClass“-Elemente überschreiben, die auf die erste Regel folgen, und alle benutzerdefinierten Stile zurücksetzen, die von der ersten Regel angewendet werden.

Browserkompatibilität:

Der allgemeine Geschwisterkombinator (~) wird von IE7 und höher erkannt. Daher ist dieser Workaround mit allen gängigen Browsern außer IE6 kompatibel.

Das obige ist der detaillierte Inhalt vonWie kann man das erste Vorkommen einer Klasse innerhalb eines übergeordneten Elements in CSS gezielt ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!