Wie wähle ich das erste Vorkommen eines Klassenelements in einem Container in CSS aus?

CSS-Selektor zum Auswählen des ersten Vorkommens eines Klassenelements in einem bestimmten Container

Bei der Auswahl von Elementen basierend auf der Klasse besteht häufig die Notwendigkeit, auf bestimmte Vorkommen abzuzielen, z erste Instanz innerhalb eines bestimmten Containers. In diesem Artikel wird erläutert, wie eine solche Präzision erreicht werden kann.

Die Herausforderung verstehen

Stellen Sie sich ein Szenario vor, in dem Sie das erste Element mit der Klasse „A“ formatieren müssen, das sich innerhalb eines Elements mit der ID „B“ befindet. . Vorausgesetzt, „B“ ist kein untergeordnetes Element eines anderen Elements „B“, können Sie zunächst versuchen, eine Kombination aus „>“ zu verwenden. (Kinderselektor) und „:first-child“ (Pseudoklasse). Dieser Ansatz greift jedoch in Fällen zu kurz, in denen die Position des ersten „A“-Elements dynamisch oder unvorhersehbar ist.

Einschränkungen überwinden

CSS3 bietet die Pseudo-Funktion „:first-of-type“ Klasse, die, wie der Name schon sagt, das erste Element eines bestimmten Typs unter seinen Geschwistern auswählt. Leider gibt es keine eingebaute „:first-of-class“-Pseudoklasse, die auf das erste Vorkommen einer bestimmten Klasse abzielt.

Um diese Einschränkung zu umgehen, können wir eine Problemumgehung mithilfe des allgemeinen Geschwisterkombinators anwenden „~.“ Dadurch können wir Elemente basierend auf ihrer Beziehung zu anderen Elementen auswählen, die dasselbe übergeordnete Element haben. Durch die Verwendung von „~“ können wir auf alle Elemente abzielen, die dem ersten „A“-Element im Container folgen.

Implementierung der Lösung

Um diese Lösung zu implementieren, würden wir zwei CSS-Regeln verwenden:

1. Regel 1: Zielt auf alle „.A“-Elemente ab, die Enkelkinder des „.C“-Elements sind (das angenommene). übergeordneter Container). Diese Regel wendet die gewünschten Stile auf das erste „A“-Element an, das dieses Kriterium erfüllt.
2. Regel 2: Zielt auf alle „.A“-Elemente ab, die den ersten in Regel 1 ausgewählten Elementen folgen. Diese Regel verwendet „~“, um alle Geschwister der Zielelemente „A“ auszuwählen, die auch Enkelkinder von „.C“ sind. Alle erforderlichen Anpassungen an den durch Regel 1 angewendeten Stilen können hier überschrieben werden.

Browserkompatibilität

Es ist wichtig zu beachten, dass der ~-Selektor Teil von CSS3 ist, das von erkannt wird die meisten gängigen Browser, einschließlich IE7 und höher.

Visualisierungsstilanwendung

Um zu veranschaulichen, wie die Regeln gelten, Betrachten wir die folgende HTML-Struktur:

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

Regel 1: Würde Stile auf Elemente [2] anwenden, da sie die ersten „A“-Elemente innerhalb ihrer jeweiligen „.B“-Elemente sind. Container.

Regel 2: Würde Stile auf Elemente [3] anwenden, da es sich um „A“-Elemente handelt, die den zuvor ausgewählten folgen ([2]).

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