Wie wähle ich das letzte untergeordnete Element mit einer bestimmten Klasse in CSS aus?

Letztes untergeordnetes Element mit einer bestimmten Klasse in CSS auswählen

In CSS auf das letzte untergeordnete Element eines übergeordneten Elements mit einer bestimmten Klasse abzielen Der Name kann mithilfe von Attributselektoren erreicht werden. Betrachten Sie das folgende HTML-Markup:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Um das letzte untergeordnete Element mit dem Klassennamen „list“ auszuwählen, können Sie das folgende CSS verwenden:

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

Verstehen Sie das CSS-Selektor:

• [class~='list'] passt auf jedes Element, das hat den Klassennamen „list“. Der Klassenname kann an einer beliebigen Stelle innerhalb des Klassenattributs des Elements platziert werden, unabhängig davon, ob es sich um die erste, zweite oder letzte Klasse handelt.
• :last-of-type wählt das letzte untergeordnete Element aus, das mit übereinstimmt vorangehender Selektor. Dadurch wird sichergestellt, dass nur das letzte untergeordnete Element mit dem Klassennamen „list“ als Ziel ausgewählt wird.

Vorteile der Verwendung von Attributselektoren:

Im Gegensatz zu CSS-Pseudoklassen Wie :nth-child() bieten Attributselektoren die folgenden Vorteile:

• Sie können Elemente unabhängig von ihrer Position im übergeordneten Element auswählen Element.
• Sie können auf Elemente mit mehreren Klassen abzielen.

Zusätzliche Ressourcen:

• [W3Schools: :last-of -Typ Selektor](https://www.w3schools.com/cssref/sel_lastoftype.asp)
• [CSS-Tricks: Attributselektoren verstehen](https://css-tricks.com/attribute-selectors/)

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