Erro de iniciante em seletor de descendentes

Observe o seguinte seletor:

p.eee {
	color: red;
}

Você já deve saber que esse seletor escolherá parágrafos com a classe eee. Por exemplo, estes:

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

Agora, observe este seletor:

p .eee {
	color: green;
}

Este seletor difere do anterior porque entre o nome da tag e o nome da classe há um espaço. Este espaço representa o seletor de descendentes. Ou seja, neste caso estamos selecionando todos os elementos com a classe eee, que estão dentro de parágrafos. Por exemplo, este seletor escolherá os seguintes spans:

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

Resultado da execução do código:

Então, mais uma vez: p.eee - esse seletor seleciona parágrafos com a classe eee. Mas se eu fizer assim: p .eee, então seleciono todos os elementos com a classe eee, localizados dentro de parágrafos. Sinta essa diferença.

Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

p.bbb {
	color: red;
}

Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

p .bbb {
	color: red;
}

Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

.eee p.bbb {
	color: red;
}

Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

.eee p .bbb {
	color: red;
}