Памылка пачаткоўцаў у селектары нашчадкаў

Паглядзіце на наступны селектар:

cssp.eee {
  color: red;
}

Вы ўжо павінны ведаць, што такі селектар выберэ абзацы з класам eee. Напрыклад, вось гэтыя:

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

Паглядзіце цяпер вось на гэты селектар:

cssp .eee {
  color: green;
}

Гэты селектар адрозніваецца ад папярэдняга тым, што ў яго паміж імем тэга і імем класа стаіць прабел. Гэты прабел уяўляе сабой селектар нашчадкаў. Гэта значыць у дадзеным выпадку мы выбіраем усе элементы з класам eee, якія знаходзяцца ўнутры абзацаў. Напрыклад, гэты селектар выберэ наступныя спены:

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

Вынік выканання кода:

Такім чынам, яшчэ раз: p.eee - такі селектар выбірае абзацы з класам eee. А вось калі я зраблю так: p .eee, то выберу ўсе элементы з класам eee, якія знаходзяцца ўнутры абзацаў. Адчуйце гэтую розніцу.

Задание 1

Раскажыце, што выбірае селектар у прыведзеным ніжэй кодзе. Затым напішыце HTML код, які падыходзіць пад гэты селектар. Вось код з селектарам:

cssp.bbb {
  color: red;
}
Задание 2

Раскажыце, што выбірае селектар у прыведзеным ніжэй кодзе. Затым напішыце HTML код, які падыходзіць пад гэты селектар. Вось код з селектарам:

cssp .bbb {
  color: red;
}
Задание 3

Раскажыце, што выбірае селектар у прыведзеным ніжэй кодзе. Затым напішыце HTML код, які падыходзіць пад гэты селектар. Вось код з селектарам:

css.eee p.bbb {
  color: red;
}
Задание 4

Раскажыце, што выбірае селектар у прыведзеным ніжэй кодзе. Затым напішыце HTML код, які падыходзіць пад гэты селектар. Вось код з селектарам:

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