Pradedančiųjų klaida palikuonių selektoriuje

Pažvelkite į šį selektorių:

p.eee {
	color: red;
}

Jūs jau turėtumėte žinoti, kad toks selektorius pasirinks paragrafus su klase eee. Pavyzdžiui, šiuos:

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

Dabar pažvelkite į šį selektorių:

p .eee {
	color: green;
}

Šis selektorius skiriasi nuo ankstesnio tuo, kad tarp elemento pavadinimo ir klasės pavadinimo yra tarpas. Šis tarpas reiškia palikuonių selektorių. Tai yra, šiuo atveju mes pasirenkame visus elementus su klase eee, esančius paragrafuose. Pavyzdžiui, šis selektorius pasirinks šiuos span elementus:

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

Kodo vykdymo rezultatas:

Taigi, dar kartą: p.eee - toks selektorius pasirenka paragrafus su klase eee. O jei padarysiu taip: p .eee, tai pasirinksiu visus elementus su klase eee, esančius viduje paragrafų. Jauskite šį skirtumą.

Paaiškinkite, ką pasirenka selektorius pateiktame žemiau kode. Tada parašykite HTML kodą, kuris atitiktų šį selektorių. Štai kodas su selektoriumi:

p.bbb {
	color: red;
}

Paaiškinkite, ką pasirenka selektorius pateiktame žemiau kode. Tada parašykite HTML kodą, kuris atitiktų šį selektorių. Štai kodas su selektoriumi:

p .bbb {
	color: red;
}

Paaiškinkite, ką pasirenka selektorius pateiktame žemiau kode. Tada parašykite HTML kodą, kuris atitiktų šį selektorių. Štai kodas su selektoriumi:

.eee p.bbb {
	color: red;
}

Paaiškinkite, ką pasirenka selektorius pateiktame žemiau kode. Tada parašykite HTML kodą, kuris atitiktų šį selektorių. Štai kodas su selektoriumi:

.eee p .bbb {
	color: red;
}