Wenn Sie CSS-Selektoren gruppieren, wenden Sie dieselben Stile auf mehrere verschiedene Elemente an, ohne die Stile in Ihrem Stylesheet zu wiederholen. Anstatt zwei, drei oder mehr CSS-Regeln zu verwenden, die dasselbe tun (z. B. die Farbe von etwas auf Rot setzen), verwenden Sie eine einzelne CSS-Regel, die dasselbe bewirkt. Das Geheimnis dieser effizienzsteigernden Taktik ist das Komma.
CSS-Selektoren gruppieren
Um CSS-Selektoren in einem Stylesheet zu gruppieren, Verwenden Sie Kommas, um mehrere gruppierte Selektoren zu trennen im Stil. In diesem Beispiel wirkt sich der Stil auf die Elemente p und div aus:
div, p { Farbe: #f00; }
In diesem Zusammenhang bedeutet ein Komma "und", daher gilt dieser Selektor für alle Absatzelemente und alle Teilungselemente. Wenn das Komma fehlte, würde der Selektor stattdessen auf alle Absatzelemente angewendet, die einer Abteilung untergeordnet sind. Das ist eine andere Art von Selektor, daher ist das Komma wichtig.
Sie können jede Form von Selektor mit jedem anderen Selektor gruppieren. In diesem Beispiel wird ein Klassenselektor mit einem ID-Selektor gruppiert:
p.red, #sub { color: #f00; }
Dieser Stil gilt für jeden Absatz mit dem Klassenattribut von rot und jedes Element (da die Art nicht angegeben ist) mit einem ID-Attribut von unter.
Sie können eine beliebige Anzahl von Selektoren gruppieren, einschließlich Selektoren, die einzelne Wörter sind und zusammengesetzte Selektoren. Dieses Beispiel enthält vier verschiedene Selektoren:
p, .red, #sub, div a: link { color: #f00; }
Diese CSS-Regel würde gelten für:
- Beliebiges Absatzelement
- Jedes Element mit der Klasse von rot
- Jedes Element mit einer ID von unter
- Das Verknüpfung Pseudoklasse der Ankerelemente, die Nachkommen einer Division sind.
Dieser letzte Selektor ist ein zusammengesetzter Selektor. Wie gezeigt, lässt er sich leicht mit den anderen Selektoren in dieser CSS-Regel kombinieren. Die Regel legt die Farbe von fest #f00 (rot) auf diesen vier Selektoren, was dem Schreiben von vier separaten Selektoren vorzuziehen ist, um das gleiche Ergebnis zu erzielen.
Jeder Selektor kann gruppiert werden
Sie können einen beliebigen gültigen Selektor in eine Gruppe einfügen, und alle Elemente im Dokument, die mit allen gruppierten Elementen übereinstimmen, haben basierend auf dieser Stileigenschaft denselben Stil.
Einige Designer ziehen es vor, die aufzulisten gruppierte Elemente in separaten Zeilen für die Lesbarkeit im Code. Das Erscheinungsbild auf der Website und die Ladegeschwindigkeit bleiben gleich. Sie können beispielsweise durch Kommas getrennte Stile zu einer Stileigenschaft in einer Codezeile kombinieren:
th, td, p.red, div#firstred { color: red; }
oder Sie können die Stile aus Gründen der Übersichtlichkeit in einzelnen Zeilen auflisten:
th,
td,
p.rot,
div#firstred
{
Farbe Rot;
}
Warum CSS-Selektoren gruppieren?
CSS-Selektoren zu gruppieren hilft, die Größe Ihres Stylesheets zu minimieren, damit es schneller geladen wird Zugegeben, Stylesheets sind nicht die Hauptschuldigen für langsames Laden; CSS-Dateien sind Textdateien, daher sind selbst sehr lange CSS-Blätter im Vergleich zu nicht optimierten Bildern winzig. Trotzdem hilft jedes bisschen Optimierung, und wenn Sie Ihr CSS etwas verkleinern und die Seiten viel schneller laden können, ist das eine gute Sache.
Das Gruppieren von Selektoren erleichtert auch die Site-Wartung. Wenn Sie eine Änderung vornehmen müssen, können Sie anstelle mehrerer CSS-Regeln einfach eine einzelne CSS-Regel bearbeiten. Dieser Ansatz spart Zeit und Ärger.
Fazit: Die Gruppierung von CSS-Selektoren steigert die Effizienz, Produktivität, Organisation und in einigen Fällen sogar die Ladegeschwindigkeit.