Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

CSS-Kombinationsselektoren umfassen verschiedene Kombinationen einfacher Selektoren.

In CSS3 gibt es vier Kombinationen:

• Nachkommenselektoren (durch Leerzeichen getrennt)
• Untergeordneter Elementselektor (getrennt durch Größer-als-Zeichen)
• Benachbarte Geschwisterselektoren (durch Pluszeichen getrennt)
• Normale Geschwisterselektoren (durch Bindestrich getrennt)

1. Nachkommenauswahl

Der Nachkommenselektor wird verwendet, um Nachkommenelemente eines Elements auszuwählen.

Das folgende Beispiel wählt alle <p>-Elemente aus und fügt sie in ein <div>-Element ein:

div p{
      Hintergrundfarbe: gelb;
    }

2. Untergeordneter Elementselektor

Im Vergleich zu Nachkommenselektoren können Kindselektoren nur Elemente auswählen, die Kinder eines anderen Elements sind.

Das folgende Beispiel wählt alle <p>-Elemente aus, die direkte untergeordnete Elemente eines <div>-Elements sind:

 div>p {
      Hintergrundfarbe: gelb;
    }

3. Selektor für benachbarte Geschwister

Der Selektor für benachbarte Geschwister wählt ein Element aus, das unmittelbar nach einem anderen Element liegt und dasselbe übergeordnete Element hat.

Wenn Sie ein Element auswählen müssen, das unmittelbar nach einem anderen Element liegt, und beide das gleiche übergeordnete Element haben, können Sie den Selektor für benachbarte Geschwister verwenden.

Das folgende Beispiel selektiert alle <p>-Elemente, die sich nach dem ersten <div>-Element befinden:

div+p{
      Hintergrundfarbe: gelb;
    }

4. Nachfolgender Geschwisterselektor

Der folgende Geschwisterselektor wählt alle benachbarten Geschwisterelemente aus, die dem angegebenen Element folgen.

Das folgende Beispiel wählt alle benachbarten Geschwisterelemente <p> nach allen <div>-Elementen aus:

div~p {
      Hintergrundfarbe: gelb;
    }

Dies ist das Ende dieses Artikels, in dem Ihnen die Verwendung von CSS-Kombinationsselektoren beigebracht wird. Weitere relevante Inhalte zu CSS-Kombinationsselektoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!