Iesācēju kļūda pēcteču selektorā

Paskatieties uz šādu selektoru:

p.eee {
	color: red;
}

Jums jau vajadzētu zināt, ka šāds selektors izvēlēsies rindkopas ar klasi eee. Piemēram, šīs:

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

Tagad paskatieties uz šo selektoru:

p .eee {
	color: green;
}

Šis selektors atšķiras no iepriekšējā ar to, ka starp elementa nosaukumu un klases nosaukumu ir atstarpe. Šī atstarpe apzīmē pēcteču selektoru. Tas nozīmē, ka šajā gadījumā mēs izvēlamies visus elementus ar klasi eee, kas atrodas rindkopu iekšienē. Piemēram, šis selektors izvēlēsies šādus span elementus:

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

Koda izpildes rezultāts:

Tātad, vēlreiz: p.eee - šāds selektors izvēlas rindkopas ar klasi eee. Bet, ja es darīšu šādi: p .eee, tad izvēlēšos visus elementus ar klasi eee, kas atrodas iekšā rindkopās. Iztēlojieties šo atšķirību.

Paskaidrojiet, ko izvēlas selektors dotajā zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:

p.bbb {
	color: red;
}

Paskaidrojiet, ko izvēlas selektors dotajā zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:

p .bbb {
	color: red;
}

Paskaidrojiet, ko izvēlas selektors dotajā zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:

.eee p.bbb {
	color: red;
}

Paskaidrojiet, ko izvēlas selektors dotajā zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:

.eee p .bbb {
	color: red;
}