Wie wähle ich das letzte untergeordnete Element aus, das keine bestimmte Klasse in CSS hat?

Kombinieren von :last-child mit :not(.class) Selector in CSS

In CSS besteht häufig die Notwendigkeit, bestimmte Elemente anhand mehrerer Kriterien auszuwählen. Ein solcher Fall ist die Auswahl des letzten Kindes, das keiner bestimmten Klasse angehört. Auch wenn es einfach erscheinen mag, führt die Verwendung nur der Selektoren :last-child und :not(.class) nicht zum gewünschten Ergebnis.

Die Verwendung von :last-child und :not(.class)

Der :last-child-Selektor zielt auf das letzte untergeordnete Element eines Elements ab, während :not(.class) Elemente auswählt, die keine angegebene Klasse haben. Diese Selektoren können jedoch nicht direkt kombiniert werden, um den gewünschten Effekt zu erzielen.

Betrachten Sie das folgende Beispiel:

<tr>

Das Ziel besteht darin, die dritte Zeile auszuwählen, die nicht über die „table_vert_controls“ verfügt " Klasse. Die folgende CSS-Regel funktioniert nicht:

tr:not(.table_vert_controls):last-child

Diese Regel wählt die letzte Zeile aus, unabhängig davon, ob sie die Klasse „table_vert_controls“ hat oder nicht.

Alternative Lösungen

Da CSS-Selektoren allein diese spezielle Kombination nicht bewältigen können, sind alternative Lösungen erforderlich:

• Verwenden einer zusätzlichen Klasse: Fügen Sie dem Element vor der gewünschten Klasse eine zusätzliche Klasse hinzu, z. B. „last-child-no-class“. Verwenden Sie dann die folgende Regel:

.last-child-no-class:not(.table_vert_controls)

• jQuery-Selektor: Nutzen Sie die leistungsstärkere Selektor-Engine von jQuery, um das gewünschte Element auszuwählen:

$('tr:not(.table_vert_controls):last')

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