Apakah Perbezaan antara Pemilih `div p` dan `div ~ p` dalam CSS?

Memahami Pemilih Div P dan Div ~ P

Pemilih div p dan div ~ p menyasarkan elemen HTML berdasarkan hubungannya dalam pokok dokumen. Walau bagaimanapun, terdapat perbezaan yang ketara antara kedua-duanya.

• Div P (tambah pemilih): Memilih semua

  elemen yang serta-merta mengikuti

  elemen, tanpa unsur campur tangan.
• Div ~ P (pemilih tilde): Memilih semua

  elemen yang didahului oleh

  elemen, tanpa mengira jarak.

Bila Menggunakan Pemilih Tambah

Gunakan pemilih apabila anda ingin menyasarkan hanya elemen yang bersebelahan dengan yang diberikan unsur. Contohnya, jika anda mempunyai

<code class="css">div + p {
  color: red;
}</code>

<code class="css">div ~ h2 {
  color: blue;
}</code>

<code class="css">ul + p {
  color: red;
}</code>