Ausführliche Erklärung zur Verwendung des CSS-Klassenselektors_CSS/HTML

Klassenauswahl
In CSS wird die Klassenauswahl mit einem Punkt angezeigt:

Code kopieren Der Code ist wie folgt folgt:

.center {text-align: center}

Im obigen Beispiel sind alle HTML-Elemente mit der Center-Klasse zentriert.
Im HTML-Code unten haben sowohl h1- als auch p-Elemente die Mittelklasse. Das bedeutet, dass beide die Regeln im „.center“-Selektor respektieren.

Code kopieren Der Code lautet wie folgt:

   

Diese Überschrift wird zentriert

Hinweis: Zahlen können nicht als erstes Zeichen des Klassennamens verwendet werden! Es funktioniert nicht in Mozilla oder Firefox.
Wie id kann auch die Klasse als abgeleiteter Selektor verwendet werden:

Code kopieren Der Code lautet wie folgt: .fancy td {

      color: #f60; Tabellenzellen innerhalb großer Elemente zeigen orangefarbenen Text auf grauem Hintergrund an. (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:




Code kopieren

Der Code lautet wie folgt:

td.fancy { Farbe: #f60; Hintergrund: #666; Im obigen Beispiel ist die Tabellenzelle mit dem Klassennamen fancy orange mit grauem Hintergrund.

Code kopieren


Der Code lautet wie folgt:

  Multi-Kategorie-Selektor 1. In HTML kann ein Klassenwert eine Liste von Wörtern enthalten, wobei jedes Wort durch Leerzeichen getrennt ist. Wenn Sie beispielsweise ein bestimmtes Element sowohl als wichtig als auch als Warnung markieren möchten, können Sie schreiben (die Reihenfolge der beiden Wörter spielt keine Rolle, Sie können Warnung als wichtig schreiben):

Code kopieren

Der Code lautet wie folgt:

Dieser Absatz ist eine sehr wichtige Warnung .

Wir gehen davon aus, dass alle Elemente mit der Klasse „wichtig“ fett und alle Elemente mit der Klasse „warnung“ kursiv geschrieben sind und die Klasse „wichtig“ und „alle“-Elemente enthält haben auch einen silbernen Hintergrund. Sie können schreiben:

Kopieren Sie den Code


Der Code lautet wie folgt:

.important {font -weight:bold ;}

.warning {font-weight:italic;}.important.warning {background:silver;} 2. Es können nur Elemente ausgewählt werden, die beide dieser Klassennamen enthalten (in beliebiger Reihenfolge). Wenn ein Mehrklassenselektor einen Klassennamen enthält, der nicht in der Klassennamenliste enthalten ist, schlägt der Abgleich fehl. Bitte beachten Sie die folgenden Regeln:

Kopieren Sie den Code

Der Code lautet wie folgt:


.wichtig .urgent {Hintergrund :silber;}

Seperti yang dijangka, pemilih ini hanya akan memadankan elemen p yang atribut kelasnya mengandungi perkataan penting dan mendesak. Oleh itu, jika elemen p hanya mempunyai perkataan penting dan amaran dalam atribut kelasnya, ia tidak akan sepadan. Walau bagaimanapun, ia boleh sepadan dengan elemen berikut:

Salin kod Kod adalah seperti berikut:

Perenggan ini adalah amaran yang sangat penting dan mendesak.