Бастаушылардың ішкі элементтер селекторындағы қатесі

Келесі селекторға назар аударыңыз:

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;
}