suchen
HeimWeb-FrontendCSS-TutorialWie formatiere ich das letzte untergeordnete Element mithilfe von CSS mit einem bestimmten Klassennamen?

How to Style the Last Child with a Specific Class Name using CSS?

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:


  • test1
  • test2
  • test3
  • test4

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!

    Stellungnahme
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Apr 18, 2025 am 11:34 AM

    Ich habe diese Frage neulich bekommen. Mein erster Gedanke ist: seltsame Frage! Bei der Spezifität geht es um Selektoren, und Rules sind keine Selektoren, also ... irrelevant?

    Können Sie @Media und @Support -Abfragen nisten?Können Sie @Media und @Support -Abfragen nisten?Apr 18, 2025 am 11:32 AM

    Ja, Sie können, und es ist nicht wirklich wichtig in welcher Reihenfolge. Ein CSS -Präprozessor ist nicht erforderlich. Es funktioniert in regulären CSS.

    Schnellschluck -Cache -BustingSchnellschluck -Cache -BustingApr 18, 2025 am 11:23 AM

    Sie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser

    Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtAuf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AM

    Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben

    Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenDatalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

    Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

    Frontkonferenz in ZürichFrontkonferenz in ZürichApr 18, 2025 am 11:03 AM

    Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

    Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternErstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

    Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

    Erstellen dynamischer Routen in einer Nuxt -AnwendungErstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

    In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

    See all articles

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
    Will R.E.P.O. Crossplay haben?
    1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    PHPStorm Mac-Version

    PHPStorm Mac-Version

    Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

    SublimeText3 Linux neue Version

    SublimeText3 Linux neue Version

    SublimeText3 Linux neueste Version

    VSCode Windows 64-Bit-Download

    VSCode Windows 64-Bit-Download

    Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor