Eine kurze Analyse der CSS-Selektorgruppierung
|
Selektorgruppierung Angenommen, Sie möchten, dass sowohl das h2-Element als auch der Absatz grau sind. Am einfachsten geht das mit der folgenden Anweisung: Eine Regel wird definiert, indem die Selektoren h2 und p durch Kommas getrennt auf der linken Seite der Regel platziert werden. Der Stil rechts (Farbe: Grau;) wird auf die Elemente angewendet, auf die von beiden Selektoren verwiesen wird. Das Komma teilt dem Browser mit, dass die Regel zwei unterschiedliche Selektoren enthält. Ohne dieses Komma wäre die Bedeutung der Regel völlig anders. Siehe Nachkommenselektoren. Sie können beliebig viele Selektoren ohne jegliche Einschränkung zusammenfassen. Wenn Sie beispielsweise viele Elemente grau darstellen möchten, können Sie eine Regel wie diese verwenden: Tipp: Durch die Gruppierung können Autoren bestimmte Stiltypen „komprimieren“, was zu einem prägnanteren Stylesheet führen kann. Die folgenden beiden Regelsätze erzielen das gleiche Ergebnis, aber es ist klar, welcher einfacher zu schreiben ist:
/* keine Gruppierung */
h1 {Farbe:blau;}
h2 {Farbe:blau;}
h3 {Farbe:blau;}
h4 {Farbe:blau;}
h5 {Farbe:blau;}
h6 {Farbe:blau;}
/* Gruppierung */
h1, h2, h3, h4, h5, h6 {Farbe:blau;}Die Gruppierung bietet einige interessante Möglichkeiten. Beispielsweise sind alle der folgenden Regelgruppierungen gleichwertig. Jede Gruppe zeigt lediglich eine andere Möglichkeit zum Gruppieren von Selektoren und Deklarationen:
/* Gruppe 1 */
h1 {Farbe: Silber; Hintergrund: Weiß;}
h2 {Farbe: Silber; Hintergrund: Grau;}
h3 {Farbe:weiß; Hintergrund:grau;}
h4 {Farbe: Silber; Hintergrund: Weiß;}
b {Farbe:grau; Hintergrund:weiß;}
/* Gruppe 2 */
h1, h2, h4 {Farbe:Silber;}
h2, h3 {Hintergrund:grau;}
h1, h4, b {Hintergrund:weiß;}
h3 {Farbe:weiß;}
b {Farbe:grau;}
/* Gruppe 3 */
h1, h4 {Farbe: Silber; Hintergrund: Weiß;}
h2 {Farbe:Silber;}
h3 {Farbe:weiß;}
h2, h3 {Hintergrund:grau;}
b {Farbe:grau; Hintergrund:weiß;}Platzhalterselektor CSS2 führte einen neuen einfachen Selektor ein – den universellen Selektor, der als Sternchen (*) angezeigt wird. Dieser Selektor passt wie ein Platzhalter zu jedem Element. Beispielsweise würde die folgende Regel jedes Element in einem Dokument rot machen:
* {Farbe:rot;}
<html>
<Kopf>
<style type="text/css">
* {Farbe:rot;}
</Stil>
</Kopf>
<Text>
<h1>Dies ist Überschrift 1</h1>
<h2>Dies ist Überschrift 2</h2>
<h3>Dies ist Überschrift 3</h3>
<h4>Dies ist Überschrift 4</h4>
<p>Dies ist ein <b>normaler</b> Textabsatz. </p>
</body>
</html>Diese Deklaration entspricht einem Gruppierungsselektor, der alle Elemente im Dokument auflistet. Mit dem Platzhalterselektor können Sie mit nur einem Tastendruck (nur ein Sternchen) den Farbattributwert Rot für alle Elemente im Dokument festlegen. Deklarationsgruppierung Wir können sowohl Selektoren als auch Deklarationen gruppieren. Angenommen, Sie möchten, dass alle h1-Elemente einen roten Hintergrund und blauen Text in der Schriftart Verdana mit einer Höhe von 28 Pixeln haben, könnten Sie den folgenden Stil schreiben:
h1 {Schriftart: 28px Verdana;}
h1 {Farbe: blau;}
h1 {Hintergrund: rot;}Der obige Ansatz ist jedoch nicht sehr effizient. Dies kann insbesondere dann mühsam sein, wenn wir eine solche Liste für ein Element mit mehreren Stilen erstellen müssen. Stattdessen können wir Deklarationen gruppieren: Dies hat genau die gleiche Wirkung wie das vorherige 3-zeilige Stylesheet. Beachten Sie, dass es wichtig ist, am Ende jeder Anweisung ein Semikolon zu verwenden, um sie zu gruppieren. Browser ignorieren Leerzeichen in Stylesheets. Solange Sie das Semikolon mit einschließen, können Sie problemlos Stile in den folgenden Formaten erstellen:
h1 {
Schriftart: 28px Verdana;
Farbe: blau;
Hintergrund: rot;
}Wie wäre es damit? Ist der obige Text besser lesbar? Wenn jedoch das zweite Semikolon weggelassen wird, interpretiert das Benutzerprogramm das Stylesheet wie folgt:
h1 {
Schriftart: 28px Verdana;
Farbe: blau, Hintergrund: rot;
}Da „Hintergrund“ kein gültiger Wert für „Farbe“ ist und für „Farbe“ nur ein Schlüsselwort angegeben werden kann, ignoriert das Benutzerprogramm die Farbdeklaration vollständig (einschließlich des Teils „Hintergrund: schwarz“). Auf diese Weise wird die h1-Überschrift nur blau ohne den roten Hintergrund angezeigt, aber es ist wahrscheinlicher, dass Sie überhaupt kein blaues h1 erhalten. Stattdessen werden diese Überschriften einfach in einer Standardfarbe (normalerweise Schwarz) ohne jegliche Hintergrundfarbe angezeigt. Schriftart: 28px Verdana. Die Deklaration funktioniert weiterhin einwandfrei, da sie korrekt mit einem Semikolon endet. Ebenso wie die Selektorgruppierung ist die Deklarationsgruppierung eine praktische Möglichkeit, Ihre Stylesheets zu verkürzen und sie dadurch übersichtlicher und leichter zu pflegen zu machen. Tipp: Es ist eine gute Angewohnheit, auch nach der letzten Anweisung einer Regel ein Semikolon einzufügen. Wenn Sie der Regel eine weitere Deklaration hinzufügen, müssen Sie nicht befürchten, das Einfügen eines weiteren Semikolons zu vergessen. Kombinieren von Selektoren und Deklarationen mit Gruppierung Wir können Selektorgruppierung und Deklarationsgruppierung in einer Regel kombinieren, um relativ komplexe Stile mit sehr wenigen Anweisungen zu definieren. Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:
h1, h2, h3, h4, h5, h6 {
Farbe: grau;
Hintergrund: weiß;
Polsterung: 10px;
Rand: 1px tief schwarz;
Schriftfamilie: Verdana;
}
<html>
<Kopf>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
Farbe: grau;
Hintergrund: weiß;
Polsterung: 10px;
Rand: 1px tief schwarz;
Schriftfamilie: Verdana;
}
</Stil>
</Kopf>
<Text>
<h1>Dies ist Überschrift 1</h1>
<h2>Dies ist Überschrift 2</h2>
<h3>Dies ist Überschrift 3</h3>
<h4>Dies ist Überschrift 4</h4>
<h5>Dies ist Überschrift 5</h5>
<h6>Dies ist Überschrift 6</h6>
</body>
</html>Kombinieren von Selektoren und Deklarationen mit Gruppierung Wir können Selektorgruppierung und Deklarationsgruppierung in einer Regel kombinieren, um relativ komplexe Stile mit sehr wenigen Anweisungen zu definieren. Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:
h1, h2, h3, h4, h5, h6 {
Farbe: grau;
Hintergrund: weiß;
Polsterung: 10px;
Rand: 1px tief schwarz;
Schriftfamilie: Verdana;
}Die obige Regel definiert den Stil aller Überschriften als grauen Text mit weißem Hintergrund, 10 Pixeln Abstand und einem 1 Pixel breiten durchgezogenen Rand. Die Textschriftart ist Verdana. Kombinieren von Selektoren und Deklarationen mit Gruppierung Wir können Selektorgruppierung und Deklarationsgruppierung in einer Regel kombinieren, um relativ komplexe Stile mit sehr wenigen Anweisungen zu definieren. Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:
h1, h2, h3, h4, h5, h6 {
Farbe: grau;
Hintergrund: weiß;
Polsterung: 10px;
Rand: 1px tief schwarz;
Schriftfamilie: Verdana;
}Zusammenfassen Oben sehen Sie die CSS-Selektorgruppierung, die ich Ihnen vorgestellt habe. Ich hoffe, sie ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Detaillierte Erklärung des JavaScript ES6-Moduls
>>: Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
Artikel empfehlen
Beispielanalyse zur Metadatenextraktion von MySQL und Oracle
Inhaltsverzeichnis Vorwort Was sind Metadaten? Ad...
MySQL 8.0.12 – Schnellinstallations-Tutorial
Die Installation von MySQL 8.0.12 dauerte zwei Ta...
Detaillierte Erklärung der Beziehung zwischen React und Redux
Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...
React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts
Inhaltsverzeichnis Vorwort 1. Anwendungsbeispiele...
Detaillierte Erklärung der Standardwerte von Breite und Höhe in CSS: auto und %
abschließend % der Breite: definiert die prozentu...
Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode
Sinnvolle Einstellung des MySQL sql_mode sql_mode...
Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung
Vorwort Derzeit löst das Front-End domänenübergre...
Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen
Inhaltsverzeichnis Fehler 1: Zu viele Datenspalte...
10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz
Die Ausführungseffizienz der MySQL-Datenbank hat ...
Zusammenfassung der Benutzererfahrung
Unabhängig davon, ob Sie an Software oder Websites...
Vue implementiert mehrere Ideen zum Themenwechsel
Inhaltsverzeichnis Themen dynamisch ändern Die er...
Der Unterschied und die Verwendung von distinct und row_number() over() in SQL
1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...
Was muss ich tun, wenn ich einen fehlerhaften MySQL-Befehl abbrechen möchte?
Ich habe einen falschen MySQL-Befehl eingegeben u...
Konzepte und Methoden für Server-Stresstests (TPS/Parallelität)
Inhaltsverzeichnis 1 Indikatoren im Stresstest 1,...
Detaillierte Einführung in den Nobody-Benutzer und Nologin im Unix/Linux-System
Was ist der Nobody-Benutzer in Unix/Linux-Systeme...