Manchmal kann man eine Reihe von Elementen auf HTML5 und CSS3-basierte Web-Seite möchte ähnliche Arten zu teilen. Werfen Sie einen Blick auf dieses Beispiel diese in Aktion zu sehen.

Die drei Überschriften haben alle sehr ähnliche Stile. drei verschiedene Stile anlegen würde langweilig sein, so CSS eine Verknüpfung enthält:

H1 Überschrift
H2 Überschrift
H3 Überschrift

Ein Stilelement (derjenige, der beginnt h1, h2, h3) Liefert alle Informationen für alle drei Titel-Typen. Wenn Sie durch Komma mehr als ein Element in einem Stil Wähler getrennt sind, gilt der Stil auf alle Elemente in der Liste. In diesem Beispiel wird die zentrierte Kursivguß mit einem gelben Hintergrund zu Position Stufen 1 angewendet, 2 und 3 alle im gleichen Stil.

Wenn Sie Änderungen vornehmen möchten, können Sie dies tun. Style-Regeln werden in der Reihenfolge angewendet, so dass Sie immer mit der allgemeinen Regel beginnen und dann bestimmte Elemente später im Stil ändern, wenn Sie es wünschen.

Wenn Sie mehrere Elemente in einer Auswahlregel haben, macht es einen großen Unterschied, ob Sie Kommas verwenden. Wenn Sie Elemente mit Leerzeichen (aber ohne Komma) getrennt, sieht CSS für ein Element in ein anderes Element verschachtelt. Wenn Sie Kommas enthalten, gilt CSS die Regel auf alle aufgeführten Elemente.

Es ist möglich, noch genauer über Selektoren mit Interpunktion zu bekommen. Beispielsweise die + Selektor beschreibt Geschwisterbeziehung. Zum Beispiel sehen Sie die folgende Regel:

h1 + p

Dies zielt nur den Absatz, der unmittelbar folgt eine Ebene-Eins-Schlagzeile. Alle anderen Absätze werden ignoriert. Es gibt auch andere Selektoren als gut, aber die hier genannten Komponenten für die meisten Anwendungen ausreichen.

Sie fragen sich vielleicht, warum die Entwickler so viele verschiedene Arten von Selektoren müssen. Sie können für die meisten Elemente, die die Tag-Namen verwenden, und nur eine Klasse oder ID auf ein beliebiges Element anwenden, die besondere Aufmerksamkeit erfordert. Das stimmt, aber ein Ziel von CSS ist Ihre HTML-Code so sauber wie möglich zu halten. Sie möchten die Struktur der Seite selbst zu verwenden, legen Sie fest, um den Stil zu helfen.