Heim > Artikel > Web-Frontend > CSS-Tutorial: Ausführliche Analyse der CSS-Selektorgruppierung

CSS-Tutorial: Ausführliche Analyse der CSS-Selektorgruppierung

无忌哥哥Original: 2018-07-12 14:49:171398Durchsuche

In diesem Artikel werden hauptsächlich die relevanten Informationen zur CSS-Selektorgruppierung vorgestellt. Freunde, die sie benötigen, können sich auf

Selektorgruppierung

beziehen Ich möchte, dass sowohl das h2-Element als auch der Absatz grau sind. Um diesen Zweck zu erreichen, ist es am einfachsten, die folgende Deklaration zu verwenden:

h2, p {color:gray;}

Platzieren Sie die h2- und p-Selektoren links von der Regel und trennen Sie sie dann durch Kommas bis Definieren Sie eine Regel. Der Stil rechts (color:gray;) wird auf die Elemente angewendet, auf die diese beiden Selektoren verweisen. Das Komma teilt dem Browser mit, dass die Regel zwei verschiedene Selektoren enthält. Ohne dieses Komma wäre die Bedeutung der Regel völlig anders. Siehe Nachkommenselektor.

Sie können beliebig viele Selektoren ohne Einschränkungen gruppieren.

Wenn Sie beispielsweise viele Elemente grau anzeigen möchten, können Sie eine Regel ähnlich der folgenden verwenden:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Tipp: Durch Gruppieren werden die Der Autor kann diese Arten von Stilen zusammen „komprimieren“, was zu einem prägnanteren Stylesheet führt.

Die folgenden zwei Regelsätze erzielen das gleiche Ergebnis, aber es ist klar, welches einfacher zu schreiben ist:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

Die Gruppierung bietet einige interessante Optionen. Beispielsweise sind alle Regelgruppierungen im folgenden Beispiel gleichwertig, jede Gruppe zeigt lediglich eine andere Art der Gruppierung von Selektoren und Deklarationen:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

Wildcard Selector

CSS2 führt a ein neuer einfacher Selektor – der universelle Selektor, der als Sternchen (*) angezeigt wird. Dieser Selektor kann mit jedem Element übereinstimmen, genau wie ein Platzhalter.

Zum Beispiel kann die folgende Regel jedes Element im Dokument rot machen:

* {color:red;}
<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

Diese Deklaration entspricht einem Gruppierungsselektor, der alle Elemente im Dokument auflistet. Mit einem Platzhalter-Selektor ermöglicht ein einziger Tastendruck (nur ein Sternchen), dass allen Elementen im Dokument der Farbattributwert Rot zugewiesen wird.

Deklarationsgruppierung

Wir können sowohl Selektoren als auch Deklarationen gruppieren.

Angenommen, Sie möchten, dass alle h1-Elemente einen roten Hintergrund haben und als blauer Text mit der 28 Pixel hohen Verdana-Schriftart angezeigt werden, können Sie den folgenden Stil schreiben:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Aber die Effizienz des oben Gesagten Ansatz Nicht hoch. Dies ist besonders problematisch, wenn wir eine solche Liste für ein Element mit mehreren Stilen erstellen. Stattdessen können wir Deklarationen gruppieren:

h1 {font: 28px Verdana; color: white; background: black;}

Dies hat genau den gleichen Effekt wie das vorherige dreizeilige Stylesheet.

Beachten Sie, dass es beim Gruppieren von Anweisungen wichtig ist, am Ende jeder Anweisung ein Semikolon zu verwenden. Browser ignorieren Leerzeichen in Stylesheets. Solange Sie ein Semikolon hinzufügen, können Sie ohne Bedenken einen Stil im folgenden Format erstellen:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Wie wäre es, ist die obige Schreibweise besser lesbar?

Wenn jedoch das zweite Semikolon weggelassen wird, interpretiert der Benutzeragent das Stylesheet wie folgt:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Da der Hintergrund kein zulässiger Wert für Farbe ist und nur ein Schlüsselwort für angegeben wird Farbe, daher ignoriert der Benutzeragent die Farbdeklaration vollständig (einschließlich des Hintergrunds: schwarzer Teil). Auf diese Weise wird die Überschrift „h1“ nur blau ohne roten Hintergrund angezeigt, es ist jedoch wahrscheinlicher, dass Sie überhaupt kein blaues „h1“ erhalten. Stattdessen erscheinen die Überschriften einfach in der Standardfarbe (normalerweise Schwarz) und haben überhaupt keine Hintergrundfarbe. Schriftart: 28px Die Verdana-Deklaration funktioniert weiterhin, da sie korrekt mit einem Semikolon endet.

Wie die Gruppierung von Selektoren ist auch die Gruppierung von Deklarationen eine bequeme Möglichkeit, Ihr Stylesheet zu kürzen, um es klarer und einfacher zu verwalten.

Tipp: Es empfiehlt sich, nach der letzten Aussage der Regel auch ein Semikolon einzufügen. Wenn Sie einer Regel eine weitere Deklaration hinzufügen, müssen Sie nicht befürchten, dass Sie vergessen, ein weiteres Semikolon einzufügen.

Selektor- und Deklarationsgruppierung kombinieren

Wir können Selektorgruppierung und Deklarationsgruppierung in einer Regel kombinieren und mit wenigen Anweisungen einen relativ komplexen Stil definieren.

Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Kombinieren von Selektoren und deklarierten Gruppierungen

Das können wir durch die Kombination von Selektorgruppierung und Deklarationsgruppierung In Regeln können relativ komplexe Stile mit sehr wenigen Anweisungen definiert werden.

Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Die obige Regel definiert den Stil aller Überschriften als grauen Text mit weißem Hintergrund und einem Abstand von 10 Pixeln mit einer 1-Pixel-Vollfläche Rahmen und die Textschriftart ist Verdana.

Selektor- und Deklarationsgruppierung kombinieren

Wir können Selektorgruppierung und Deklarationsgruppierung in einer Regel kombinieren und mit wenigen Anweisungen einen relativ komplexen Stil definieren.

Die folgende Regel legt einen komplexen Stil für alle Überschriften fest:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Das obige ist der detaillierte Inhalt vonCSS-Tutorial: Ausführliche Analyse der CSS-Selektorgruppierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Analyse der Berechnungsfunktion in css3_css3Nächster Artikel：Eine kurze Analyse der Berechnungsfunktion in css3_css3

In Verbindung stehende Artikel

Mehr sehen