Eroarea începătorului în selectorul de descendenți

Uitați-vă la următorul selector:

p.eee {
	color: red;
}

Ar trebui deja să știți că un astfel de selector va alege paragrafele cu clasa eee. De exemplu, acestea:

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

Acum uitați-vă la acest selector:

p .eee {
	color: green;
}

Acest selector diferă de cel anterior prin faptul că între numele tag-ului și numele clasei există un spațiu. Acest spațiu reprezintă selectorul de descendenți. Adică în acest caz alegem toate elementele cu clasa eee, aflate în interiorul paragrafelor. De exemplu, acest selector va alege următoarele elemente span:

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

Rezultatul executării codului:

Deci, încă o dată: p.eee - un astfel de selector alege paragrafele cu clasa eee. Dar dacă fac așa: p .eee, atunci voi alege toate elementele cu clasa eee, aflate în interiorul paragrafelor. Simțiți această diferență.

Spuneți ce alege selectorul în codul de mai jos. Apoi scrieți codul HTML, potrivit sub acest selector. Iată codul cu selectorul:

p.bbb {
	color: red;
}

Spuneți ce alege selectorul în codul de mai jos. Apoi scrieți codul HTML, potrivit sub acest selector. Iată codul cu selectorul:

p .bbb {
	color: red;
}

Spuneți ce alege selectorul în codul de mai jos. Apoi scrieți codul HTML, potrivit sub acest selector. Iată codul cu selectorul:

.eee p.bbb {
	color: red;
}

Spuneți ce alege selectorul în codul de mai jos. Apoi scrieți codul HTML, potrivit sub acest selector. Iată codul cu selectorul:

.eee p .bbb {
	color: red;
}