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.
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.
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.
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!