Fehler beim Gruppieren komplexer CSS-Selektoren

Alles, was durch Kommas beim Gruppieren getrennt ist, muss einen vollständigen Selektor darstellen. Sehen wir uns an, wo man hier einen Fehler machen kann.

Nehmen wir an, wir haben folgenden Code:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

Lassen Sie uns die beiden Selektoren in einem gruppieren. Hier ist die korrekte Gruppierungsvariante:

#block h2, #block h3 {
	color: red;
}

Und hier ist die falsche Gruppierungsvariante:

#block h2, h3 {
	color: red;
}

In dieser falschen Gruppierungsvariante scheint Anfängern aus irgendeinem Grund, dass #block sowohl für h2 als auch für h3 gilt, das nach dem Komma steht. Aber Selektoren wirken nicht durch Kommas weiter und tatsächlich kann diese falsche Gruppierungsvariante so umgeschrieben werden:

#block h2 {
	color: red;
}
h3 {
	color: red;
}

Vergleichen Sie mit der ursprünglichen Variante, die wir zu kürzen begonnen haben:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

Vereinfachen Sie den Code durch Gruppierung der Selektoren:

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
	color: blue;
}
#block h3 {
	text-align: center;
	font-size: 16px;
	color: red;
}

Vereinfachen Sie den Code durch Gruppierung der Selektoren:

#block h1.eee {
	text-align: center;
	font-size: 30px;
}
#block h2.zzz {
	text-align: center;
	font-size: 20px;
}

Vereinfachen Sie den Code durch Gruppierung der Selektoren:

.xxx .kkk {
	text-align: center;
}
.eee h2.zzz {
	text-align: center;
}
#eee h2 {
	text-align: center;
}

Vereinfachen Sie den Code durch Gruppierung der Selektoren:

.eee h2.zzz {
	text-align: center;
}
.xxx {
	text-align: center;
}