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

So wählen Sie das „Letzte Kind“ mit einem bestimmten Klassennamen in CSS aus

Bei der Arbeit mit CSS-Selektoren besteht die Aufgabe des Targetings aus Manchmal kann das letzte untergeordnete Element eines Elements mit einer bestimmten Klasse entstehen. Betrachten Sie den folgenden HTML-Code:

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

Unser Ziel ist es, einen Stil auf das letzte untergeordnete Element von

anzuwenden. Elemente mit der Klasse „Liste“. Der übliche Ansatz zur Verwendung von ul li:nth-child(3) ist möglicherweise nicht immer anwendbar, da die Position des gewünschten Elements variieren kann.

Um dieses Problem zu lösen, können wir Attributselektoren nutzen. So geht's:

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

In diesem Selektor:

• [class~='list'] zielt auf alle Elemente ab, deren Klassenattribut die Zeichenfolge „list“ als ganzes Wort enthält. Dies ermöglicht mehrere Klassen mit „list“ an beliebiger Stelle in der Zeichenfolge, unabhängig von der Reihenfolge.
• :last-of-type wählt die letzte Übereinstimmung des vorherigen Selektors innerhalb seines Typs aus. In diesem Fall zielt es auf das letzte
• Element mit der Klasse „list“.

Durch die Kombination dieser Selektoren können wir das letzte untergeordnete Element der angegebenen Klasse effektiv gestalten. Eine ausführliche, praktische Demonstration finden Sie unter http://codepen.io/chasebank/pen/ZYyeab.

Weitere Informationen zu Attributselektoren finden Sie im Folgenden Ressourcen:

• http://css-tricks.com/attribute-selectors/
• http://www.w3schools.com/css/css_attribute_selectors.asp

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