Was ist die Darstellung des Klassenselektors in CSS?

In CSS wird der Klassenselektor als Punkt angezeigt:

.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 respektieren.

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

Hinweis: Das erste Zeichen des Klassennamens darf keine Zahlen enthalten! Es funktioniert nicht in Mozilla oder Firefox.

Wie id kann auch class als abgeleiteter Selektor verwendet werden:

.fancy td {
color: #f60;
background: #666;
}

Im obigen Beispiel haben die Tabellenzellen innerhalb des größeren Elements mit dem Klassennamen fancy einen grauen Hintergrund mit orangefarbenem Text wird angezeigt. (Ein größeres Element mit dem Namen fancy könnte eine Tabelle oder ein Div sein.)

Elemente können auch basierend auf ihrer Klasse ausgewählt werden:

td.fancy {
color: #f60;
background: #666;
}

Im obigen Beispiel lautet der Klassenname Fancy Table Cells Orange mit grauem Hintergrund.

<td class="fancy">

Sie können jedem Tabellenelement beliebig oft die Klasse fancy zuweisen. Mit Fancy markierte Zellen sind orange mit grauem Hintergrund. Zellen, denen keine Klasse namens fancy zugewiesen ist, sind von dieser Regel nicht betroffen. Es ist auch erwähnenswert, dass Absätze mit der Klasse „Fancy“ nicht orange mit einem grauen Hintergrund sind und natürlich alle anderen als „Fancy“ gekennzeichneten Elemente von dieser Regel nicht betroffen sind. Dies ist alles auf die Art und Weise zurückzuführen, wie wir diese Regel geschrieben haben. Der Effekt ist auf Tabellenzellen beschränkt, die als ausgefallen markiert sind (d. h. die Verwendung des td-Elements zur Auswahl der ausgefallenen Klasse).

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