Error al agrupar selectores CSS complejos

Todo lo separado por comas al agrupar debe ser un selector completo. Veamos dónde se puede cometer un error aquí.

Supongamos que tenemos el siguiente código:

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

Agrupemos dos selectores en uno. Aquí está la variante correcta de agrupación:

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

Y aquí está la variante incorrecta de agrupación:

#block h2, h3 {
	color: red;
}

En esta variante incorrecta de agrupación, los principiantes por alguna razón piensan que #block se aplica tanto a h2 como a h3 después de la coma. Pero los selectores no funcionan a través de una coma y, de hecho, esta variante incorrecta de agrupación se puede reescribir así:

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

Compare con la variante inicial que comenzamos a abreviar:

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

Simplifique el código usando agrupación de selectores:

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

Simplifique el código usando agrupación de selectores:

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

Simplifique el código usando agrupación de selectores:

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

Simplifique el código usando agrupación de selectores:

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