Error de principiantes en el selector de descendientes

Observe el siguiente selector:

p.eee {
	color: red;
}

Ya debe saber que dicho selector elegirá párrafos con la clase eee. Por ejemplo, estos:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Ahora observe este selector:

p .eee {
	color: green;
}

Este selector se diferencia del anterior en que tiene un espacio entre el nombre de la etiqueta y el nombre de la clase. Este espacio representa el selector de descendientes. Es decir, en este caso elegimos todos los elementos con la clase eee, que se encuentran dentro de los párrafos. Por ejemplo, este selector elegirá los siguientes spans:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Resultado de la ejecución del código:

Entonces, una vez más: p.eee - tal selector elige párrafos con la clase eee. Pero si lo hago así: p .eee, entonces elijo todos los elementos con la clase eee, ubicados dentro de los párrafos. Sientan esta diferencia.

Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:

p.bbb {
	color: red;
}

Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:

p .bbb {
	color: red;
}

Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:

.eee p.bbb {
	color: red;
}

Explique qué selecciona el selector en el código proporcionado a continuación. Luego escriba el código HTML que se ajuste a este selector. Aquí está el código con el selector:

.eee p .bbb {
	color: red;
}