Pemilih Keturunan dalam CSS

Katakan kita mempunyai senarai ul dan senarai ol:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>
<ol>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ol>

Mari warnakan tag li dalam senarai ini dengan warna merah:

cssli {
  color: red;
}

Sekarang katakan kita mahu warnakan tag li senarai ul dengan warna merah, dan tag li senarai ol - dengan warna hijau.

Dalam kes ini, pemilih keturunan akan membantu kita. Ia membenarkan pemilihan tag berdasarkan elemen induknya. Untuk ini, anda perlu nyatakan pemilih induk, dan diikuti dengan ruang - pemilih keturunan. Dalam kes kami, pemilih ul li akan memilih semua tag li dari senarai ul, dan pemilih ol li - akan memilih semua tag li dari senarai ol. Mari warnakan mereka dengan warna yang dikehendaki:

cssul li {
  color: red;
}
ol li {
  color: green;
}

Pemilih keturunan tidak semestinya terdiri daripada dua pemilih tag - boleh terdapat sebarang bilangan, ditulis dengan ruang. Dalam kod berikut, sebagai contoh, semua tag i yang berada di dalam tag li dipilih, yang mana mereka sendiri berada di dalam tag ul:

cssul li i {
  color: red;
}

html<ul>
  <li>teks <i>cetek condong</i></li>
  <li>teks <i>cetek condong</i></li>
  <li>teks <i>cetek condong</i></li>
  <li>teks <i>cetek condong</i></li>
</ul>

<p>
  teks perenggan <i>cetek condong</i>
</p>
<p>
  teks perenggan <i>cetek condong</i>
</p>

html<p>
  teks perenggan <b><i>tebal condong</i></b>
</p>
<p>
  teks perenggan <i>cetek condong</i>
</p>