Makosa ya Wanafunzi Wanaoanza katika Kichagua Kizazi

Angalia kichaguzi kifuatacho:

p.eee {
	color: red;
}

Unapaswa kujua tayari kwamba kichaguzi kama hicho kitachagua aya zenye darasa eee. Kwa mfano, hizi:

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

Sasa angalia kichaguzi hiki:

p .eee {
	color: green;
}

Kichaguzi hiki kinatofautiana na cha awali kwa sababu kati ya jina la kitambulisho na jina la darasa kuna nafasi. Nafasi hii inawakilisha kichaguzi cha vizazi. Yaani, katika kesi hii tunachagua vipengele vyote vyenye darasa eee, vilivyo ndani ya aya. Kwa mfano, kichaguzi hiki kitachagua span zifuatazo:

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

Matokeo ya utekelezaji wa msimbo:

Kwa hiyo, mara nyingine tena: p.eee - kichaguzi kama hiki kinachagua aya zenye darasa eee. Lakini ikiwa nitafanya hivi: p .eee, basi nitachagua vipengele vyote vyenye darasa eee, vilivyo ndani ya aya. Elewa tofauti hii kwa undani.

Eleza, kichaguzi kinachochagua nini katika msimbo ulio hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ndio msimbo na kichaguzi:

p.bbb {
	color: red;
}

Eleza, kichaguzi kinachochagua nini katika msimbo ulio hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ndio msimbo na kichaguzi:

p .bbb {
	color: red;
}

Eleza, kichaguzi kinachochagua nini katika msimbo ulio hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ndio msimbo na kichaguzi:

.eee p.bbb {
	color: red;
}

Eleza, kichaguzi kinachochagua nini katika msimbo ulio hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ndio msimbo na kichaguzi:

.eee p .bbb {
	color: red;
}