CSS-Selektoren

CSS-Selektoren

CSS-Selektoren werden für die "Suche" (oder Auswahl) von HTML-Elementen verwendet, deren Stil eingestellt werden soll.

Wir können CSS-Selektoren in fünf Kategorien einteilen:

Diese Seite erläutert die grundlegenden CSS-Selektoren.

CSS Element-Selektor

Elementwähler wählen HTML-Elemente basierend auf dem Elementnamen aus.

Beispiel

Hier werden alle <p>-Elemente auf der Seite zentriert ausgerichtet und haben eine rote Textfarbe:

p {
  text-align: center;
  color: red;
}

Probieren Sie es selbst aus

CSS-ID-Wähler

ID-Wähler verwenden das ID-Attribut des HTML-Elements, um ein bestimmtes Element auszuwählen.

Die ID des Elements ist im Dokument einzigartig, daher wird der ID-Wähler verwendet, um ein einzigartiges Element auszuwählen!

Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Sieben-Zeichenzeichen (＃) gefolgt von der ID des Elements.

Beispiel

Diese CSS-Regel wird auf das HTML-Element mit id="para1" angewendet:

#para1 {
  text-align: center;
  color: red;
}

Probieren Sie es selbst aus

Hinweis:ID-Name kann nicht mit einer Zahl beginnen.

CSS-Klassenauswahlerelement

Klassenauswahlerelemente wählen HTML-Elemente mit einer bestimmten class-Eigenschaft aus.

Um Elemente mit einer bestimmten Klasse auszuwählen, schreiben Sie ein Punktzeichen (.) gefolgt vom Klassennamen.

Beispiel

In diesem Beispiel werden alle HTML-Elemente mit class="center" rot und zentriert ausgerichtet:

.center {
  text-align: center;
  color: red;
}

Probieren Sie es selbst aus

Sie können auch spezifische HTML-Elemente angeben, die von der Klasse beeinflusst werden.

Beispiel

In diesem Beispiel wird nur das <p>-Element mit class="center" zentriert ausgerichtet:

p.center {
  text-align: center;
  color: red;
}

Probieren Sie es selbst aus

HTML-Elemente können auch mehrere Klassen haben.

Beispiel

In diesem Beispiel wird das <p>-Element basierend auf class="center" und class="large" gestylisiert:

<p class="center large">Dieser Absatz zitiert zwei Klassen.</p>

Probieren Sie es selbst aus

Hinweis:Klassenname kann nicht mit einer Zahl beginnen!

CSS-Universeller Wähler

Der universelle Wähler (*) wählt alle HTML-Elemente auf der Seite aus.

Beispiel

Die folgenden CSS-Regeln beeinflussen jedes HTML-Element auf der Seite:

* {
  text-align: center;
  color: blue;
}

Probieren Sie es selbst aus

CSS-Gruppierungs-Wähler

Gruppierungs-Wähler wählen alle HTML-Elemente mit gleicher Stylisierung aus.

Sehen Sie sich das folgende CSS-Codebeispiel (h1, h2 und p-Elemente haben die gleiche Stylisierung):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Es ist am besten, Wähler zu gruppieren, um den Code so kurz wie möglich zu halten.

Um Wähler zu gruppieren, verwenden Sie Kommas, um jeden Wähler zu trennen.

Beispiel

In diesem Beispiel gruppieren wir die oben genannten Wähler in der folgenden Weise:

h1, h2, p {
  text-align: center;
  color: red;
}

Probieren Sie es selbst aus

Alle einfachen CSS-Wähler

Wähler Beispiel Beispielbeschreibung
.class .intro Wählen Sie alle Elemente mit der Klasse "intro" aus.
#id #firstname Wählen Sie das Element mit id="firstname" aus.
* * Wählen Sie alle Elemente aus.
element p Wählen Sie alle <p>-Elemente aus.
element,element,.. div, p Wählen Sie alle <div>-Elemente und alle <p>-Elemente aus.

Erweiternde Lektüre

Extrakurse:CSS Element-Selektor

Extrakurse:CSS Selektor-Gruppierung

Extrakurse:CSS Class-Selektor im Detail

Extrakurse:CSS ID-Selektor im Detail

Extrakurse:CSS Attribut-Selektor im Detail

Extrakurse:CSS Nachkommen-Selektor

Extrakurse:CSS Kind-Selektor

Extrakurse:CSS Nachbarkind-Selektor