Wie ändere ich die Farbe des letzten Wortes in einer h1-Überschrift?

CSS ändern, um die Farbe des letzten Begriffs in einer h1-Überschrift zu ändern

Die Verbesserung der Ästhetik des Titels Ihrer Website ist eine häufige Aufgabe in Webentwicklung. Diese Untersuchung konzentriert sich auf die Änderung der Farbe des letzten Wortes in einer h1-Überschrift.

Um dies zu erreichen, umfasst ein erster Ansatz die Verwendung des span-Elements:

<h1>main <span>title</span></h1>

Durch die Anwendung separater CSS-Regeln Der Haupttitel und das Schlusswort können unterschiedliche Farben erhalten. Diese Methode hat jedoch den Nachteil, dass sie zusätzliches HTML-Markup einführt.

Eine alternative Lösung, die die Notwendigkeit eines zusätzlichen Markups überflüssig macht, verwendet die Bibliothek „lettering.js“. Diese Bibliothek ermöglicht die Verwendung des ::last-word-Selektors, der es ermöglicht, gezielt auf das letzte Wort in der h1-Überschrift zu zielen:

h1 {
  color: #f00;
}

/* Requires lettering.js. Please refer to the article linked below before downvoting. */
h1::last-word {
  color: #00f;
}

Durch die Einbindung der Lettering.js-Bibliothek und die Verwendung des ::last- Mit der Wortauswahl ist es möglich, die Farbe des letzten Wortes in einer h1-Überschrift zu ändern, ohne zusätzliche Markup-Elemente hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe des letzten Wortes in einer h1-Überschrift?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!