Wie wähle ich das letzte untergeordnete Element ohne eine bestimmte Klasse in CSS aus?

Kombination von :last-child mit :not(.class) Selektor in CSS

Auswahl des letzten untergeordneten Elements, das kein bestimmtes Kind hat Das Klassenattribut mag wie eine einfache Aufgabe erscheinen, stellt jedoch eine Herausforderung in CSS dar.

Problem:

Bedenken Sie die folgende HTML-Struktur:

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

Das Ziel besteht darin, die dritte Zeile auszuwählen, die das letzte untergeordnete Element ohne die Klasse „table_vert_controls“ ist. Der folgende Selektor funktioniert jedoch nicht:

tr:not(.table_vert_controls):last-child

Einschränkungen von CSS-Selektoren:

CSS-Selektoren, einschließlich :last-child, zielen speziell auf das letzte Kind ab eines Elements. Es gibt jedoch keine entsprechende Pseudoklasse für die Auswahl des letzten untergeordneten Elements eines Elements, das keine bestimmte Klasse hat.

Lösung mit Selektoren 4:

In spät 2015 führte Selectors 4 eine Erweiterung für :last-child ein, die die Übergabe eines beliebigen Selektors als Argument ermöglicht. Dadurch wird der folgende Selektor aktiviert:

tr:nth-last-child(1 of :not(.table_vert_controls))

Browser-Unterstützung:

Während einige Browser mit der Implementierung dieser Erweiterung begonnen haben, wird sie immer noch nicht allgemein unterstützt.

Alternative Lösungen:

Bis diese Erweiterung breiter unterstützt wird, umfassen alternative Ansätze:

• Hinzufügen einer zusätzlichen Klasse vor der Klasse „table_vert_controls“
• Mit jQuery: $(tr:not(.table_vert_controls):last)

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