Ändern der H2-Elementfarbe

Bei der Codierung gibt es oft viele verschiedene Lösungen für ein bestimmtes Problem. Dies gilt insbesondere für das Styling eines HTML-Elements.

Eines der am einfachsten zu ändernden Dinge ist die Farbe des Textes. Aber manchmal scheint nichts zu funktionieren, was Sie versuchen:

 h2 .red-text { color: red; }  

CatPhotoApp

Wie können Sie also die Farbe des H2-Elements in Rot ändern?

Option 1: Inline-CSS

Eine Möglichkeit wäre die Verwendung von Inline-CSS, um das Element direkt zu formatieren.

Wie bei den anderen Methoden ist die Formatierung wichtig. Schauen Sie sich den obigen Code noch einmal an:

CatPhotoApp

Stellen Sie zum Verwenden des Inline-Stils sicher, dass Sie das styleAttribut verwenden und die Eigenschaften und Werte in doppelte Anführungszeichen (") setzen:

CatPhotoApp

Option 2: Verwenden Sie CSS-Selektoren

Anstatt Inline-Styling zu verwenden, können Sie Ihren HTML-Code oder die Struktur und den Inhalt der Seite vom Styling oder CSS trennen.

Entfernen Sie zunächst das Inline-CSS:

 h2 .red-text { color: red; }  

CatPhotoApp

Sie müssen jedoch vorsichtig mit dem von Ihnen verwendeten CSS-Selektor sein. Schauen Sie sich das Element an:

h2 .red-text { color: red; }

Wenn ein Leerzeichen vorhanden ist, weist der Selektor h2 .red-textden Browser an, das Element mit der Klasse anzuvisieren red-text, deren Kind untergeordnet ist h2. Das H2-Element hat jedoch kein untergeordnetes Element. Sie versuchen, das H2-Element selbst zu formatieren.

Um dies zu beheben, entfernen Sie das Leerzeichen:

h2.red-text { color: red; }

Oder zielen Sie einfach direkt auf die red-textKlasse ab:

.red-text { color: red; }