Erreur courante des débutants avec le sélecteur de descendants

Regardez le sélecteur suivant :

p.eee {
	color: red;
}

Vous devriez déjà savoir qu'un tel sélecteur ciblera les paragraphes avec la classe eee. Par exemple, ceux-ci :

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

Regardez maintenant ce sélecteur :

p .eee {
	color: green;
}

Ce sélecteur diffère du précédent par le fait qu'il y a un espace entre le nom de la balise et le nom de la classe. Cet espace représente le sélecteur de descendants. C'est-à-dire que dans ce cas nous sélectionnons tous les éléments avec la classe eee, situés à l'intérieur des paragraphes. Par exemple, ce sélecteur ciblera les spans suivants :

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

Résultat de l'exécution du code :

Donc, encore une fois : p.eee - un tel sélecteur sélectionne les paragraphes avec la classe eee. Mais si je fais comme ceci : p .eee, alors je sélectionne tous les éléments avec la classe eee, situés à l'intérieur des paragraphes. Saisissez bien cette différence.

Expliquez ce que le sélecteur dans le code ci-dessous sélectionne. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :

p.bbb {
	color: red;
}

Expliquez ce que le sélecteur dans le code ci-dessous sélectionne. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :

p .bbb {
	color: red;
}

Expliquez ce que le sélecteur dans le code ci-dessous sélectionne. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :

.eee p.bbb {
	color: red;
}

Expliquez ce que le sélecteur dans le code ci-dessous sélectionne. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :

.eee p .bbb {
	color: red;
}