Грешка на начинаещи в селектора за потомци

Погледнете следния селектор:

p.eee {
	color: red;
}

Вече трябва да знаете, че такъв селектор ще избере абзаци с клас eee. Например, тези:

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

Сега погледнете този селектор:

p .eee {
	color: green;
}

Този селектор се различава от предишния по това, че между името на тага и името на класа има интервал. Този интервал представлява селектор за потомци. Тоест в този случай ние избираме всички елементи с клас eee, които се намират вътре в абзаци. Например, този селектор ще избере следните спенове:

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

Резултат от изпълнението на кода:

И така, още веднъж: p.eee - такъв селектор избира абзаци с клас eee. А ако направя така: p .eee, ще избера всички елементи с клас eee, намиращи се вътре в абзаци. Усетете тази разлика.

Разкажете какво избира селекторът в предоставения по-долу код. След това напишете HTML код, който отговаря на този селектор. Ето кода със селектора:

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}