Warum wendet mein N-ter-Kind-Selektor Stile auf alle Elemente an und nicht nur auf eines?

Warum funktioniert der N-te-Kind-Selektor nicht?

Der n-te-Kind-Selektor ist ein leistungsstarkes Tool zum Targeting bestimmter Elemente innerhalb einer Gruppe von Geschwistern. Es ist jedoch wichtig, seine Grenzen zu verstehen, um es effektiv nutzen zu können.

Problem: Alle sozialen Symbole erscheinen gleich

Stellen Sie sich die folgende Situation vor, in der das n-te Kind wird verwendet, um Hintergrundbilder zu sozialen Symbolen hinzuzufügen:

<code class="css">#social-links div:nth-child(1) { background-image: url('media/linkedin.svg'); }</code>

Erwartetes Verhalten: Nur das erste soziale Symbol sollte ein LinkedIn-Hintergrundbild haben.
Tatsächliches Verhalten: Alle Symbole haben das gleiche Hintergrundbild.

Grund: Geschwister zählen, nicht Elemente

Der Selektor für das n-te Kind zählt die Anzahl der Geschwister des Zielelements, nicht die Elemente selbst. Im obigen Code wird die Anzahl der untergeordneten div-Elemente von #social-links gezählt.

In diesem Fall ist das div.social-logo-Element immer das einzige untergeordnete div-Element des Ankerelements. Daher gibt nth-child immer 1 zurück, was bedeutet, dass jedes Element das gleiche Hintergrundbild erhält.

Lösung: Zielen Sie auf die Geschwister des übergeordneten Elements ab

Um auf bestimmte div.social-Elemente abzuzielen -logo-Elemente müssen wir den Selektor ändern, um auf die Geschwister des übergeordneten Ankerelements abzuzielen:

<code class="css">#social-links a:nth-child(1) div { background-image: url('media/linkedin.svg'); }</code>

Indem wir auf das n-te untergeordnete Element des Ankerelements abzielen, wählen wir nun korrekt das beabsichtigte div.social-logo-Element aus und wenden es an das Hintergrundbild entsprechend.

Das obige ist der detaillierte Inhalt vonWarum wendet mein N-ter-Kind-Selektor Stile auf alle Elemente an und nicht nur auf eines?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!