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

Regardez le sélecteur suivant :

cssp.eee {
  color: red;
}

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

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

Regardez maintenant ce sélecteur :

cssp .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 :

html<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.

Задание 1

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 :

cssp.bbb {
  color: red;
}

Задание 2

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 :

cssp .bbb {
  color: red;
}

Задание 3

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 :

css.eee p.bbb {
  color: red;
}

Задание 4

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 :

css.eee p .bbb {
  color: red;
}