Wie wähle ich das letzte untergeordnete Element mit einem bestimmten Klassennamen in CSS aus?

Auswählen des „letzten untergeordneten Elements“ mit einem bestimmten Klassennamen in CSS

Bei der Arbeit mit CSS kann es entscheidend sein, bestimmte Elemente anhand ihrer Position und Klasse auszuwählen Namen. In dieser Frage wird untersucht, wie das Element „letztes Kind“ mit einem bestimmten Klassennamen gezielt angesprochen werden kann.

Problem:

Berücksichtigen Sie die folgende HTML-Struktur:

<ul>
    <li>

Das Ziel besteht darin, das letzte Kind auszuwählen, das den Klassennamen „list“ hat, und darauf einen bestimmten Stil anzuwenden it.

Vorgeschlagene Lösung (die nicht funktioniert):

ul li.list:last-child{background-color:#000;}

Nachteil:

Die vorgeschlagene Lösung ist falsch, da CSS den :last-child-Selektor für Elemente mit Klassen nicht unterstützt.

Funktioniert Lösung:

Das Problem kann mithilfe eines Attributselektors gelöst werden:

[class~=list]:last-of-type  {
    background: #000;
}

Erklärung:

• [class~=list] : Dieser Attributselektor gleicht Elemente ab, die den Klassennamen „list“ oder einen anderen Klassennamen haben, der die Zeichenfolge enthält „list.“
• :last-of-type: Diese Pseudoklasse wählt das letzte Element eines bestimmten Typs aus, in diesem Fall das li-Element.

Vorteile:

• Es funktioniert auch, wenn die Klasse „Liste“ nicht die letzte Klasse auf der Liste ist Element.
• Es ist keine Kenntnis der genauen Position des Zielelements erforderlich.

Wichtige Hinweise:

• Vermeiden Sie die Verwendung von ul li:nth -child(3), da die Anzahl der Kinder variieren kann.
• JavaScript ist hierfür nicht zulässig Lösung.

Das obige ist der detaillierte Inhalt vonWie wähle ich das letzte untergeordnete Element mit einem bestimmten Klassennamen in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!