用车教车主别犯傻 若交警正准备对你停在路边

Ein CSS-Selektor ist der erste Teil einer CSS-Regel. Es ist ein Muster aus Elementen und anderen Begriffen, die dem Browser mitteilen, welche HTML-Elemente ausgew?hlt werden sollen, um die CSS-Eigenschaftswerte innerhalb der Regel anzuwenden. Das oder die Elemente, die durch den Selektor ausgew?hlt werden, werden als das Subjekt des Selektors bezeichnet.

In früheren Artikeln sind Sie m?glicherweise auf verschiedene Selektoren gesto?en und haben gelernt, dass es Selektoren gibt, die das Dokument auf unterschiedliche Weise ansprechen — zum Beispiel, indem sie ein Element wie h1 oder eine Klasse wie .special ausw?hlen. Lassen Sie uns damit beginnen, die Hauptselektoren, die Sie bereits gesehen haben, noch einmal zusammenzufassen.

Ein Typselektor wird manchmal als Tagname-Selektor oder Element-Selektor bezeichnet, da er ein HTML-Tag/Element in Ihrem Dokument ausw?hlt. Im untenstehenden Beispiel haben wir die Selektoren span, em und strong verwendet.

Versuchen Sie, das folgende Beispiel zu bearbeiten (klicken Sie auf "Play", um es im MDN Playground zu ?ffnen), um eine CSS-Regel hinzuzufügen, die das <h1>-Element ausw?hlt und seine Farbe in Blau ?ndert:

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Der Gro?-/Kleinschreibung unterscheidende Klassenselektor beginnt mit einem Punkt (.) Zeichen. Er w?hlt alles im Dokument aus, dem diese Klasse zugeordnet ist. Im folgenden Live-Beispiel haben wir eine Klasse namens highlight erstellt und an mehreren Stellen in meinem Dokument angewendet. Alle Elemente, die die Klasse angewendet haben, werden hervorgehoben.

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

Versuchen Sie, das obige Beispiel (mit dem MDN Playground) zu bearbeiten, um die folgenden ?nderungen vorzunehmen:

1. Bearbeiten Sie das HTML, um den Inhalt zu ?ndern, auf den die .highlight-Stile angewendet werden. Sie k?nnten zum Beispiel einige <span>-Elemente hinzufügen, um verschiedene Teile des vorhandenen Inhalts einzuschlie?en und die highlight-Klasse darauf anzuwenden, einige vorhandene highlight-Klassen entfernen oder neuen Inhalt hinzufügen, um die highlight-Klasse darauf anzuwenden.
2. Bearbeiten Sie das CSS, um die Deklarationen innerhalb der .highlight-Regel zu ?ndern, neue hinzuzufügen, wenn Sie m?chten, und beachten Sie, wie sich dies auf das Styling aller Elemente auswirkt, auf die die highlight-Klasse angewendet wird.
3. Erstellen Sie eine neue Klassenregel im CSS mit anderen Deklarationen darin (zum Beispiel mit einem Selektor von .highlight2), und versuchen Sie, diese auf einige Ihrer HTML-Inhalte anzuwenden.

Sie k?nnen einen Selektor erstellen, der bestimmte Elemente mit der angewendeten Klasse anspricht. Im n?chsten Beispiel heben wir ein <span> mit einer Klasse von highlight anders hervor als eine <h1>-überschrift mit einer Klasse von highlight. Wir tun dies, indem wir den Typselektor für das Ziel-Element verwenden und die Klasse mit einem Punkt anh?ngen, ohne Leerzeichen dazwischen.

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

Dieser Ansatz reduziert den Umfang einer Regel. Die Regel wird nur auf diese spezielle Kombination von Element und Klasse angewendet. Sie müssten einen weiteren Selektor hinzufügen, wenn Sie entscheiden, dass die Regel auf andere Elemente ebenfalls angewendet werden soll.

Sie k?nnen einem Element mehrere Klassen zuweisen und diese einzeln ansprechen oder nur das Element ausw?hlen, wenn alle Klassen im Selektor vorhanden sind. Dies kann hilfreich sein, um Komponenten zu erstellen, die auf Ihrer Website auf unterschiedliche Weise kombiniert werden k?nnen.

Im folgenden Beispiel haben wir ein <div>, das eine Notiz enth?lt. Der graue Rahmen wird angewendet, wenn die Box eine Klasse von notebox hat. Wenn sie zus?tzlich eine Klasse von warning oder danger hat, ?ndern wir die border-color.

Wir k?nnen dem Browser mitteilen, dass wir das Element nur dann ausw?hlen m?chten, wenn es zwei Klassen angewendet hat, indem wir sie ohne Leerzeichen zwischen ihnen aneinanderreihen. Sie werden sehen, dass das letzte <div> kein Styling angewendet bekommt, da es nur die danger-Klasse hat; es ben?tigt auch notebox, um etwas angewendet zu bekommen.

<div class="notebox">This is an informational note.</div>

<div class="notebox warning">This note shows a warning.</div>

<div class="notebox danger">This note shows danger!</div>

<div class="danger">
  This won't get styled — it also needs to have the notebox class
</div>

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

Der Gro?-/Kleinschreibung unterscheidende ID-Selektor beginnt mit einem # statt einem Punktzeichen, wird aber auf die gleiche Weise wie ein Klassenselektor verwendet. Der Unterschied besteht darin, dass eine ID nur einmal pro Seite verwendet werden kann und Elemente nur einen einzigen id-Wert zugeordnet bekommen k?nnen. Er kann ein Element ausw?hlen, dem die id gesetzt ist, und Sie k?nnen der ID einen Typselektor voranstellen, um das Element nur anzusprechen, wenn sowohl das Element als auch die ID übereinstimmen. Sie k?nnen beide Verwendungszwecke im folgenden Beispiel sehen:

<h1 id="heading">ID selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

Versuchen Sie, das obige Beispiel zu bearbeiten, um die folgenden ?nderungen vorzunehmen:

1. Bearbeiten Sie das HTML, um die #one-Stile auf den ersten Absatz statt auf den zweiten anzuwenden.
2. Bearbeiten Sie das CSS, um die Deklarationen innerhalb der ID-Selektoren zu ?ndern, und beachten Sie, wie sich dies auf das Erscheinungsbild des HTML auswirkt.

Wenn Sie mehr als eine Sache haben, die dasselbe CSS verwendet, k?nnen die einzelnen Selektoren in eine Selektorenliste kombiniert werden, sodass die Regel auf alle individuellen Selektoren angewendet wird. Wenn ich zum Beispiel dasselbe CSS für ein h1 und auch eine Klasse von .special habe, k?nnte ich dies als zwei separate Regeln schreiben.

h1 {
  color: blue;
}

.special {
  color: blue;
}

Ich k?nnte diese auch in eine Selektorenliste kombinieren, indem ich ein Komma zwischen ihnen hinzufüge.

h1, .special {
  color: blue;
}

Leerzeichen vor oder nach dem Komma sind gültig. M?glicherweise finden Sie die Selektoren auch lesbarer, wenn jeder in einer neuen Zeile steht.

h1,
.special {
  color: blue;
}

Im folgenden Beispiel versuchen Sie, die beiden Selektoren zu kombinieren, die identische Deklarationen haben. Die visuelle Darstellung sollte nach ihrem Kombinieren gleich bleiben.

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Wenn Sie Selektoren auf diese Weise gruppieren, wird die ganze Regel ignoriert, wenn ein Selektor syntaktisch ungültig ist.

Im folgenden Beispiel wird die ungültige Klassenselektorenregel ignoriert, w?hrend das h1 trotzdem gestylt würde.

h1 {
  color: blue;
}

..special {
  color: blue;
}

Wenn sie jedoch kombiniert werden, werden weder das h1 noch die Klasse gestylt, da die ganze Regel als ungültig betrachtet wird.

h1, ..special {
  color: blue;
}

Der universelle Selektor wird durch ein Sternchen (*) angezeigt. Er w?hlt alles im Dokument aus. Wenn * mit einem Nachkommen-Kombinator verkettet ist, w?hlt er alles innerhalb dieses Vorfahren-Elements aus. Zum Beispiel w?hlt p * alle verschachtelten Elemente innerhalb des <p>-Elements aus.

Im folgenden Beispiel verwenden wir den universellen Selektor, um die Abst?nde aller Elemente zu entfernen. Anstatt der Standardbrowserstilierung, die überschriften und Abs?tze mit Abst?nden versieht, ist alles dicht zusammen.

<h1>Universal selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

Diese Art von Verhalten ist manchmal in "Reset-Stylesheets" zu sehen, die die gesamte Browser-Stilierung entfernen. Da der universelle Selektor globale ?nderungen vornimmt, verwenden wir ihn für sehr spezifische Situationen, wie die unten beschriebene.

Ein Anwendungsfall des universellen Selektors ist es, Selektoren leichter lesbar und offensichtlicher zu machen, was sie tun. Zum Beispiel, wenn wir alle Nachkommelemente eines <article>-Elements ausw?hlen wollten, die das erste Kind ihres Elternteils sind, einschlie?lich direkter Kinder, k?nnten wir die :first-child-Pseudo-Klasse verwenden. Wir werden hierüber mehr in der Lektion zu Pseudo-Klassen und Pseudo-Elementen lernen:

article :first-child {
  font-weight: bold;
}

Dieser Selektor k?nnte jedoch mit article:first-child verwechselt werden, der jedes <article>-Element ausw?hlen würde, das das erste Kind eines anderen Elements ist.

Um diese Verwirrung zu vermeiden, k?nnen wir den universellen Selektor zur :first-child-Pseudo-Klasse hinzufügen, um klarer zu machen, was der Selektor tut. Er w?hlt jedes Element aus, das das erste Kind eines <article>-Elements oder das erste Kind eines Nachkommenelements von <article> ist:

article *:first-child {
  font-weight: bold;
}

Obwohl beide dasselbe tun, ist die Lesbarkeit erheblich verbessert.

In diesem Artikel haben wir CSS-Selektoren rekapituliert, die es erm?glichen, bestimmte HTML-Elemente anzusprechen, und uns Typ-, Klassen- und ID-Selektoren etwas ausführlicher angesehen als zuvor. Im n?chsten Artikel werden wir in Attributselektoren eintauchen.

CSS-Klassen, Scrimba ^{MDN Lernpartner}

Eine interaktive Lektion, die einige Anleitungen zu CSS-Klassen bietet.

• Zurück
• übersicht: Grundlegendes zur CSS-Gestaltung
• Weiter