Detaillierte Beispiele für die Verwendung von Klassenselektoren in CSS

In CSS fügt der Klassenselektor einen Punkt vor dem Klassennamen hinzu. Wenn mehrere Klassen vorhanden sind, hat er die Form .important.urgent.

Klassenselektor
In CSS wird der Klassenselektor mit einem Punkt angezeigt:

    .center {text-align: center}

Im obigen Beispiel sind alle HTML-Elemente mit der Mittelklasse zentriert.
Im HTML-Code unten haben sowohl h1- als auch p-Elemente 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.
Klasse kann wie id auch als abgeleiteter Selektor verwendet werden:

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

Im obigen Beispiel werden die Tabellenzellen innerhalb des größeren Elements mit dem Klassennamen fancy mit einem grauen Hintergrund in Orange angezeigt Text. (Ein größeres Element mit dem Namen fancy könnte eine Tabelle oder ein p 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 Die Tabellenzellen wird orange mit grauem Hintergrund sein.

   <td class="fancy">

Mehrklassenselektor

1 In HTML kann ein Klassenwert eine durch Leerzeichen getrennte Liste von Wörtern enthalten. 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):

<p class="important warning">
This paragraph is a very important warning.
</p>

Das gehen wir an Alle Elemente mit der Klasse „wichtig“ sind fett gedruckt und alle Elemente mit der Klasse „Warnung“ sind kursiv. Alle Elemente mit der Klasse „wichtig“ und „Warnung“ sind ebenfalls silbern hinterlegt. Es kann wie folgt geschrieben werden:

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2. Durch die Verknüpfung zweier Klassenselektoren können nur Elemente ausgewählt werden, die diese Klassennamen enthalten (die Reihenfolge der Klassennamen ist nicht begrenzt).
Wenn ein Mehrklassenselektor einen Klassennamen enthält, der nicht in der Klassennamenliste enthalten ist, schlägt der Abgleich fehl. Beachten Sie die folgenden Regeln:

.important.urgent {background:silver;}

Erwartungsgemäß stimmt dieser Selektor nur mit p Elementen überein, deren Klassenattribut die Wörter wichtig und dringend enthält. Wenn also ein p-Element in seinem Klassenattribut nur die Wörter important und warning enthält, wird es nicht übereinstimmen. Es stimmt jedoch mit den folgenden Elementen überein:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für die Verwendung von Klassenselektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!