Wie funktioniert der CSS-Selektor „:last-child' und welche Alternativen gibt es?

CSS :last-child Selektorspezifität

Hintergrund:

Der :last-child Selektor zielt auf das letzte untergeordnete Element ab eines bestimmten übergeordneten Elements. Allerdings muss das untergeordnete Element das allerletzte Element in diesem Container sein.

Erklärung:

Berücksichtigen Sie den folgenden CSS-Selektor:

li.complete:last-child {
  background-color: yellow;
}

Dieser Selektor wendet den angegebenen Stil nicht auf das letzte Element mit der Klasse „vollständig“ an, wenn danach weitere Elemente vorhanden sind. Im bereitgestellten HTML heißt es beispielsweise:

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

Der :last-child-Selektor wendet den gelben Hintergrund nicht auf das zweite „vollständige“ Listenelement an, da es nicht das letzte Element in der Liste ist.

Alternativen:

Wenn Sie das Styling auf das letzte Element mit einer bestimmten Klasse anwenden müssen, unabhängig von seiner Position im Container, Sie können stattdessen :last-of-type verwenden:

li.complete:last-of-type {
  background-color: yellow;
}

Dieser Selektor zielt auf das letzte Element ab, das mit der „vollständigen“ Klasse übereinstimmt, auch wenn danach weitere Elemente vorhanden sind.

Darüber hinaus können Sie den „nth-child“-Selektor verwenden, um das letzte Element eines bestimmten Typs anzusprechen:

ul :nth-child(4) {
  background-color: yellow;
}

Dadurch wird das vierte Listenelement ausgewählt, unabhängig davon, welches Klasse.

Überlegungen zu jQuery:

Der jQuery-Selektor $("li.complete:last-child") funktioniert nicht, da er nach dem allerletzten Element sucht im übergeordneten Element. Um mithilfe von jQuery das letzte Element mit einer bestimmten Klasse anzusprechen, können Sie die Funktion „last“ verwenden:

$("li.complete").last();

Fazit:

Der :last-child-Selektor erfordert, dass das Element das allerletzte untergeordnete Element im übergeordneten Element ist. Ist dies nicht der Fall, bieten :last-of-type oder „nth-child“ möglicherweise geeignetere Optionen.

Das obige ist der detaillierte Inhalt vonWie funktioniert der CSS-Selektor „:last-child' und welche Alternativen gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!