Wie wähle ich mit CSS das erste Element einer Klasse in einem Container aus?

CSS-Selektor zur Auswahl des ersten Elements einer bestimmten Klasse

Bei der Webentwicklung ist die Auswahl bestimmter Elemente auf einer Webseite von entscheidender Bedeutung für Stil und Funktionalität. Eine häufige Aufgabe besteht darin, das erste Vorkommen eines Elements mit einer bestimmten Klasse innerhalb einer breiteren Hierarchie auszuwählen.

Stellen Sie sich ein Szenario vor, in dem Sie das erste Element mit der Klasse „A“ innerhalb eines Elements mit der ID oder Klasse „ B'. Während die Kombination von „>“ und „First-Child“-Selektoren können in einigen Fällen funktionieren, es schlägt fehl, wenn die Position des „A“-Elements innerhalb der „B“-Elementhierarchie variiert.

CSS3-Lösung: :first-of-type

CSS3 bietet eine Lösung durch die Pseudoklasse :first-of-type, die es Ihnen ermöglicht, das erste Element eines bestimmten Typs im Verhältnis zu seinen Geschwistern auszuwählen. Allerdings enthält CSS3 keine :first-of-class-Pseudoklasse.

Problemumgehung mit dem allgemeinen Geschwisterkombinator (~)

Als Problemumgehung können Sie den allgemeinen Geschwisterkombinator ( ~) in Verbindung mit CSS-Überschreibungen, um das gewünschte Ergebnis zu erzielen. Der ~-Selektor stimmt mit jedem Element überein, das ein gleichgeordnetes Element des vom linken Selektor ausgewählten Elements, aber kein direktes untergeordnetes Element ist.

Beachten Sie diese Regel:

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

Diese Regel wählt alle aus Element mit der Klasse „A“, das ein Enkel eines Elements mit der Klasse „C“ ist. Dabei wird davon ausgegangen, dass „.C“ ein gemeinsamer Vorfahr aller „A“-Elemente ist, die Sie formatieren möchten.

Fügen Sie als Nächstes eine übergeordnete Regel hinzu:

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

Diese Regel verwendet das ~ Selektor, um nur auf die „A“-Elemente abzuzielen, die nach einem vorherigen „A“-Element mit demselben übergeordneten Element stehen. Es überschreibt effektiv die von der ersten Regel angewendeten Stile.

Beispiel:

Bedenken Sie die folgende HTML-Struktur:

<div>

Die oben genannten CSS-Regeln wenden Stile wie folgt an:

• Elemente [1] haben keine Klasse „A“ und sind es auch nicht betroffen.
• Elemente [2] sind die ersten „A“-Elemente innerhalb ihrer jeweiligen übergeordneten Elemente und erhalten die in der ersten Regel definierten Stile.
• Elemente [3] sind nicht die ersten „ A'-Elemente und erhalten die in der übergeordneten Regel definierten Stile, die die erste Regel überschreiben.

Das obige ist der detaillierte Inhalt vonWie wähle ich mit CSS das erste Element einer Klasse in einem Container aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!