Wie formatiere ich das letzte untergeordnete Element mit einem bestimmten Klassennamen in CSS?

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

Im Bereich des CSS-Stils ist es oft notwendig, Elemente zu manipulieren basierend auf ihrer Position innerhalb ihres übergeordneten Containers. Die Herausforderung entsteht, wenn wir das „letzte Kind“ eines Elements mit einem bestimmten Klassennamen ansprechen müssen.

Bedenken Sie die folgende HTML-Struktur:

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

Das Ziel besteht darin, einen Stil anzuwenden bis zum letzten

Element mit dem Klassennamen „list“. Während der ursprünglich vorgeschlagene Selektor, ul li.list:last-child, nicht funktioniert, gibt es eine alternative Lösung.

Attributselektoren zur Rettung

CSS-Attributselektoren ermöglichen es uns, Elemente basierend auf bestimmten Attributen anzusprechen. In diesem Fall können wir den Selektor [class~='list'] verwenden, um Elemente anzusprechen, die die Klasse „list“ haben. Der Operator „~=" gleicht ein Element ab, das die angegebene Klasse als ganzes Wort hat. Dies ermöglicht Flexibilität bei den Klassenbenennungskonventionen und stellt sicher, dass mehrere Klassen berücksichtigt werden.

Schließlich wählt die :last-of-type-Pseudoklasse das letzte untergeordnete Element ihres Typs aus, das mit dem vorhergehenden Selektor übereinstimmt. Durch die Kombination dieser Techniken entsteht der folgende funktionierende Selektor:

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

Dieser Selektor entspricht dem letzten

Element, das die Klasse „list“ hat, und wenden Sie eine schwarze Hintergrundfarbe an.

Erfahren Sie mehr über Attributselektoren:

• [Attributselektoren in CSS-Tricks]( http://css-tricks.com/attribute-selectors/)
• [CSS-Attributselektoren in W3Schools](http://www.w3schools.com/css/css_attribute_selectors.asp)

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