Latest web development tutorials

CSS und verschachtelte Gruppierung

Gruppieren von Selektoren

Es gibt viele Elemente, die den gleichen Stil im Stylesheet haben.

h1
{
Farbe: grün;
}
h2
{
Farbe: grün;
}
p
{
Farbe: grün;
}

Um den Code zu minimieren, können Sie das Paket Selektor verwenden.

Jeder Selektor Gebrauchte Kommas.

Im folgenden Beispiel verwenden wir den Code über die Gruppierung Selektoren:

Beispiele

h1,h2,p
{
color:green;
}

Versuchen »


Verschachtelte Selektoren

Es gelten kann Selector Innere Stile Selector.

Im folgenden Beispiel wird ein Satz von drei Arten:

  • Geben Sie einen Stil für alle p Elemente
  • = "Markiert" Elemente einen Stil für alle Klasse angeben
  • = "Markiert" p-Element innerhalb eines Elements gibt einen Stil für alle Arten

Beispiele

p
{
color: blue;
text-align: center;
}
.marked
{
background-color: red;
}
.marked p
{
color: white;
}

Versuchen »