Kesilapan Pemula dalam Pemilih Keturunan

Lihat pada pemilih berikut:

p.eee {
	color: red;
}

Anda sepatutnya sudah tahu, pemilih seperti ini akan memilih perenggan dengan kelas eee. Sebagai contoh, yang ini:

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

Sekarang lihat pada pemilih ini:

p .eee {
	color: green;
}

Pemilih ini berbeza daripada yang sebelumnya kerana terdapat ruang antara nama tag dan nama kelas. Ruang ini mewakili pemilih keturunan. Maksudnya dalam kes ini kita memilih semua elemen dengan kelas eee, yang berada di dalam perenggan. Sebagai contoh, pemilih ini akan memilih span berikut:

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

Keputusan pelaksanaan kod:

Jadi, sekali lagi: p.eee - pemilih seperti ini memilih perenggan dengan kelas eee. Tetapi jika saya buat begini: p .eee, maka saya memilih semua elemen dengan kelas eee, yang berada di dalam perenggan. Hayati perbezaan ini.

Terangkan apa yang dipilih oleh pemilih dalam kod yang ditunjukkan di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:

p.bbb {
	color: red;
}

Terangkan apa yang dipilih oleh pemilih dalam kod yang ditunjukkan di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:

p .bbb {
	color: red;
}

Terangkan apa yang dipilih oleh pemilih dalam kod yang ditunjukkan di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:

.eee p.bbb {
	color: red;
}

Terangkan apa yang dipilih oleh pemilih dalam kod yang ditunjukkan di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:

.eee p .bbb {
	color: red;
}