Erro ao agrupar seletores CSS complexos

Tudo o que é separado por vírgula durante o agrupamento deve representar um seletor completo. Vamos ver onde é possível errar aqui.

Suponha que temos o seguinte código:

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

Vamos agrupar os dois seletores em um. Aqui está a forma correta de agrupar:

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

E aqui está a forma incorreta de agrupar:

#block h2, h3 {
	color: red;
}

Nesta forma incorreta de agrupamento, os iniciantes, por algum motivo, acham que #block se aplica tanto ao h2 quanto ao h3 que vem após a vírgula. Mas os seletores não se aplicam através da vírgula e, na verdade, esta forma incorreta de agrupamento pode ser reescrita assim:

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

Compare com a versão inicial que começamos a abreviar:

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

Simplifique o código usando o agrupamento de seletores:

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

Simplifique o código usando o agrupamento de seletores:

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

Simplifique o código usando o agrupamento de seletores:

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

Simplifique o código usando o agrupamento de seletores:

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