Wie wähle ich das erste Element mit einer bestimmten Klasse innerhalb einer komplexen HTML-Struktur aus?

So wählen Sie das erste Element einer bestimmten Klasse aus

Bei der Arbeit mit HTML-Elementen ist die Auswahl bestimmter Elemente für das Styling oder die Bearbeitung von entscheidender Bedeutung. Ein Szenario besteht darin, das erste Vorkommen einer Klasse innerhalb eines anderen Elements anzuvisieren, was eine Herausforderung darstellt, wenn die Position der gewünschten Klasse innerhalb verschiedener Elemente variiert.

In diesem Zusammenhang zielen wir darauf ab, das erste Element mit der Klasse „ A' innerhalb eines Elements, das durch die ID oder Klasse 'B' identifiziert wird. Das Problem entsteht, wenn sich „B“ sowohl im Namen als auch in der Struktur unterscheiden kann und das Element „A“ in seiner Position innerhalb von „B“ inkonsistent ist. Ein konsistenter Faktor bleibt jedoch bestehen: das Vorhandensein eines äußeren Elements „C“.

Lösung: Verwendung von Geschwisterselektoren

CSS3 führt die :first-of-type-Pseudoklasse ein, die das auswählt erstes Element seiner Art unter Geschwistern. Leider fehlt CSS eine :first-of-class-Pseudoklasse. Deshalb brauchen wir eine alternative Problemumgehung.

Ein Ansatz besteht darin, den allgemeinen Geschwisterkombinator (~) zusammen mit übergeordneten Stilen zu verwenden, um unser Ziel zu erreichen. Diese Technik nutzt die Tatsache, dass CSS Stile von oben nach unten anwendet. Durch die Definition zweier Regeln können wir den Standardstil von „.A“-Elementen überschreiben, die nicht unseren gewünschten Kriterien entsprechen:

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

In diesen Regeln zielt die erste auf alle „.A“-Enkelkinder von „. C'. Da dies das erste gewünschte Vorkommen umfasst, müssen wir diesen Stil für nachfolgende „.A“-Elemente mithilfe der zweiten Regel „rückgängig machen“. Dies wird erreicht, indem der ~-Kombinator verwendet wird, um nur die „.A“-Elemente auszuwählen, die auf ein anderes „.A“-Element unter demselben übergeordneten Element folgen.

Wie Stile angewendet werden

Um dies zu veranschaulichen Damit die Technik funktioniert, beachten Sie die folgende HTML-Struktur:

<div class="C">
  <div class="B">
    <div class="E">Content <!-- [1] --></div>
    <div class="F">Content <!-- [1] --></div>
    <div class="A">Content <!-- [2] --></div>
    <div class="A">Content <!-- [3] --></div>
  </div>
  <!-- ... other elements ... -->
</div>

Hier stellt „[1]“ Elemente dar, die unsere Kriterien nicht erfüllen, während „[2]“ und „[3]“ stellen das erste und alle nachfolgenden „.A“-Elemente dar, die wir anders formatieren möchten.

1. Die erste Regel formatiert alle „.A“-Elemente, die Enkelkinder von „.C“ sind. Dazu gehören die Elemente „[2]“ und „[3]“.
2. Die zweite Regel zielt auf jedes „.A“-Element ab, das auf ein anderes „.A“-Element unter demselben übergeordneten Element folgt. Dazu gehört das Element „[3]“, aber nicht „[2]“, da es kein vorangehendes Geschwisterelement mit der Klasse „.A“ hat.

Als Ergebnis ist Element „[2]“ (das erste „.A“) behält den Standardstil bei, während der Stil des Elements „[3]“ durch die zweite Regel überschrieben wird. Somit zielen wir erfolgreich auf das erste Vorkommen der Klasse „.A“ im Kontext des Elements „.C“ ab und formatieren es.

Das obige ist der detaillierte Inhalt vonWie wähle ich das erste Element mit einer bestimmten Klasse innerhalb einer komplexen HTML-Struktur aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!