CSS-Klassen-Selektoren-Detailliert

Der Klasse-Selektor ermöglicht die Festlegung von Stilen, die unabhängig von den Dokumentelementen sind.

CSS-Klassen-Selektoren

Der Klasse-Selektor ermöglicht die Festlegung von Stilen, die unabhängig von den Dokumentelementen sind.

Dieser Selektor kann sowohl einzeln als auch in Verbindung mit anderen Elementen verwendet werden.

Tipp:Diese Selektoren können nur verwendet werden, wenn das Dokument angemessen markiert ist, daher ist es erforderlich, vor der Verwendung dieser beiden Selektoren einige Überlegungen und Pläne zu machen.

Die häufigste Methode, um Stile anzuwenden, ohne auf das spezifische Design der Elemente zu achten, ist der Einsatz des Klasse-Selektors.

HTML-Code ändern

Bevor der Klasse-Selektor korrekt funktioniert, muss das spezifische Dokument markiert werden.

Um die Stylesheets mit den Elementen zu verknüpfen, muss die Klasse einen angemessenen Wert haben. Sehen Sie sich das folgende HTML-Codebeispiel an:

<h1 class="important">
Dieser Titel ist sehr wichtig.
</h1>
<p class="important">
Dieser Absatz ist sehr wichtig.
</p>

Im obigen Code sind die Klassen beider Elemente auf important gesetzt: Der erste Titel (h1-Element) und der zweite Absatz (p-Element).

Syntax

Dann verwenden wir die folgende Syntax, um Stile auf diese klassifizierten Elemente anzuwenden, d.h. ein Punkt vor dem Klassennamen, gefolgt vom Wildcard-Selektor:

*.important {color:red;}

Wenn Sie nur alle Elemente mit demselben Klassennamen auswählen möchten, können Sie den Wildcard-Selektor im KlassenSelektor ignorieren, was keine negativen Auswirkungen hat:

.important {color:red;}

Probieren Sie es selbst aus

Kombination mit Element-Selektoren

Klassen-Selektoren können zusammen mit Element-Selektoren verwendet werden.

Beispielsweise möchten Sie möglicherweise, dass nur Absätze als rote Textfarbe angezeigt werden:

p.important {color:red;}

Der Selektor wird jetzt alle p-Elemente mit der Klasse 'important' abstimmen, aber keine anderen Elementtypen, unabhängig davon, ob sie diese Klasse haben oder nicht. Der Selektor p.important wird interpretiert als: 'Alle Absätze mit dem class-Attribut 'important'. Da das h1-Element kein Absatz ist, stimmt dieser Regelselektor nicht überein, daher wird das h1-Element nicht rot dargestellt.

Wenn Sie tatsächlich unterschiedliche Stile für das h1-Element festlegen möchten, können Sie den Selektor h1.important verwenden:

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

Probieren Sie es selbst aus

CSS-Mehrfachklassen-Selektoren

Im vorherigen Abschnitt haben wir den Fall behandelt, dass der class-Wert ein Wort enthält. In HTML kann ein class-Wert eine Liste von Wörtern enthalten, die durch Leerzeichen getrennt sind. Zum Beispiel, wenn Sie möchten, dass ein bestimmtes Element gleichzeitig als wichtig (important) und Warnung (warning) markiert wird, können Sie schreiben:

<p class="important warning">
Dieser Absatz ist eine sehr wichtige Warnung.
</p>

Die Reihenfolge dieser Wörter ist irrelevant, sie können auch als 'warning important' geschrieben werden.

Wir gehen davon aus, dass alle Elemente mit der Klasse 'important' fett sind und alle Elemente mit der Klasse 'warning' kursiv sind. Alle Elemente, die sowohl 'important' als auch 'warning' enthalten, haben auch einen silbernen Hintergrund. Dies kann folgendermaßen geschrieben werden:

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

Probieren Sie es selbst aus

Durch das Verbinden zweier Klassen-Selektoren kann nur ausgewählt werdenEnthält gleichzeitig diese Klassennamender Elemente (die Reihenfolge der Klassennamen ist egal).

Fails die Übereinstimmung, wenn ein Mehrklassen-Selektor einen Namen enthält, der nicht in der Klassennamenliste vorhanden ist. Sehen Sie sich die folgenden Regeln an:

.important.urgent {background:silver;}

Wie erwartet, wird dieser Selektor nur p-Elemente mit einem class-Attribut, das das Wort important und urgent enthält, auswählen. Daher wird ein p-Element, das nur das Wort important und warning im class-Attribut hat, nicht ausgewählt. Es kann jedoch die folgenden Elemente auswählen:

<p class="important urgent warning">
Dieser Absatz ist eine sehr wichtige und dringende Warnung.
</p>

Probieren Sie es selbst aus

Wichtige Informationen:In Versionen von Internet Explorer vor IE7 auf verschiedenen Plattformen kann der Internet Explorer keine Mehrklassen-Selektoren korrekt verarbeiten.