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;
}