Was ist die Darstellung des CSS-Klassenselektors?

CSS-Klassenauswahl

Mit der Klassenauswahl kann der Stil unabhängig von Dokumentelementen festgelegt werden . Dieser Selektor kann allein oder in Kombination mit anderen Elementen verwendet werden.

Tipp: Diese Selektoren können nur verwendet werden, nachdem das Dokument entsprechend markiert wurde. Daher erfordert die Verwendung beider Selektoren normalerweise etwas Überlegung und Planung.

Um Stile unabhängig vom spezifischen Designelement anzuwenden, ist die häufigste Methode die Verwendung eines Klassenselektors.

In CSS wird der Klassenselektor als Punkt angezeigt, zum Beispiel:

.center {text-align: center}

Im obigen Beispiel sind alle HTML-Elemente mit der Mittelklasse zentriert.

Im folgenden HTML-Code haben sowohl das h1- als auch das p-Element die Mittelklasse. Das bedeutet, dass beide die Regeln im „.center“-Selektor befolgen.

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Hinweis: Zahlen können nicht als erstes Zeichen des Klassennamens verwendet werden! Es funktioniert nicht in Mozilla oder Firefox.

Kombiniert mit anderen Selektoren

Klassenselektoren können in Verbindung mit anderen Selektoren, beispielsweise Elementselektoren, verwendet werden.

Zum Beispiel möchten Sie vielleicht, dass nur Absätze in rotem Text angezeigt werden:

p.center{color:red;}

Der Selektor stimmt jetzt mit allen p-Elementen überein, deren Klassenattribut „center“ enthält, aber unabhängig davon nicht mit Elementen eines anderen Typs von Ob es dieses Klassenattribut gibt. Der Selektor p.center wird interpretiert als: „alle Absätze, deren Klassenattributwert center ist“. Da es sich bei dem h1-Element nicht um einen Absatz handelt, stimmt der Selektor für diese Regel nicht mit ihm überein, sodass das h1-Element nicht in roten Text umgewandelt wird.

Wenn Sie wirklich einen anderen Stil für das h1-Element angeben möchten, können Sie den Selektor h1.center verwenden:

p.center {color:red;}
h1.center {color:blue;}

Das obige ist der detaillierte Inhalt vonWas ist die Darstellung des CSS-Klassenselektors?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!