Warum funktioniert der Selektor für mein n-tes Kind nicht bei sozialen Symbolen?

n-ter-Kind-Selektor funktioniert nicht: Warum und wie man das Problem behebt

Der n-te-Kind-Selektor ist ein leistungsstarkes Werkzeug zum Auswählen von Elementen basierend auf ihre Position innerhalb eines übergeordneten Elements. Es kann jedoch manchmal verwirrend sein, warum der Selektor nicht wie erwartet funktioniert.

Im Fall des bereitgestellten Codes wird der n-te-Kind-Selektor verwendet, um unterschiedliche Hintergrundbilder auf soziale Symbole innerhalb des #sozialen anzuwenden. Links div. Trotz der N-ten-Kind-Bedingung sehen alle Symbole gleich aus. Dieses Problem ist auf ein Missverständnis der Funktionsweise des Selektors zurückzuführen.

Funktionsweise des n-ten Kindes

Der n-te-Kind-Selektor zählt Geschwister – Elemente, die dasselbe übergeordnete Element teilen. Im bereitgestellten HTML ist jedes div.social-logo das einzige untergeordnete Element seines Anker--Tags. Daher zählt der Selektor für das n-te Kind nur ein Element, unabhängig von seinem angegebenen Wert.

Die Ankertags innerhalb von #social-links sind jedoch Geschwister zueinander. Dadurch kann der Selektor für das n-te Kind mithilfe der folgenden Syntax effektiv auf einzelne Anker-Tags abzielen:

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

Durch die gezielte Ausrichtung auf die Anker-Tags anstelle der untergeordneten div-Elemente kann der Selektor für das n-te Kind nun zwischen diesen unterscheiden die sozialen Symbole.

Lösung

Um das Problem zu beheben, ersetzen Sie die ursprünglichen Deklarationen für das n-te Kind durch Folgendes:

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

#social-links a:nth-child(2) div {
    background-image: url(...);
}

#social-links a:nth-child(3) div {
    background-image: url(...);
}</code>

Durch Targeting Wenn Sie die -Tags verwenden, wendet der n-te-Kind-Selektor wie vorgesehen korrekt unterschiedliche Hintergrundbilder auf jedes soziale Symbol an.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Selektor für mein n-tes Kind nicht bei sozialen Symbolen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!