Latest web development tutorials

Eine Kombination von CSS-Selektoren

Eine Kombination von CSS-Selektoren

Note Kombination Selektoren zeigen die direkte Beziehung zwischen den beiden Selektoren.

CSS-Selektoren umfassen eine Kombination aus verschiedenen Kombinationen von einfachen Selektoren.

In CSS3 enthält es vier Kombinationen:

  • Nachkomme Selektor (getrennt durch Leerzeichen)
  • Kinder Elementselektoreinrichtung (größer als begrenzt)
  • Angrenzende Geschwister-Selektor (plus begrenzt)
  • Gewöhnliche Bruder Selektor (getrennt durch einen Bindestrich)

Nachkommen Picker

Nachkomme Selektor passt auf alle Elemente würdiger Nachkomme Elemente.

Das folgende Beispiel wählt alle <p> Element in das <div> Element:

Beispiele

div p
{
background-color:yellow;
}

Versuchen »


Kind-Selektoren

Im Vergleich mit Nachfahrenselektoren, sub-Selektoren (Child-Selektoren) kann ein Element als untergeordnetes Element des Elements auswählen.

Die folgenden Beispiele ausgewählt <div> Element in allen direkten Kind-Elemente <p>:

Beispiele

div>p
{
background-color:yellow;
}

Versuchen »


Benachbarte Geschwister Selector

Angrenzende Geschwister-Selektor (Adjacent Geschwister-Selektor) wählen Sie ein anderes Element unmittelbar nach dem Element, und beide haben das gleiche Elternelement.

Wenn Sie ein anderes Element unmittelbar nach dem Element auswählen müssen, und beide haben die gleiche Elternelement, können Sie den benachbarten Geschwister-Selektor (Adjacent Geschwister-Selektor) verwenden.

Das folgende Beispiel wählt alle die erste in der <div> Element nach dem Element <p>:

Beispiele

div+p
{
background-color:yellow;
}

Versuchen »


Gewöhnliche benachbarten Geschwister-Selektoren

Gemeinsame benachbarten Geschwister-Selektor alle angegebenen Geschwisterelemente auswählen.

Das folgende Beispiel wählt alle <div> Elemente aller benachbarten Geschwister <p>:

Beispiele

div~p
{
background-color:yellow;
}

Versuchen »