Adik Beradik CSS: Apakah Perbezaan Antara Pemilih Plus ( ) dan Tilde (~)?

Adik beradik dalam CSS: Meneroka Pemilih 'Plus' dan 'Tilde'

Apabila bekerja dengan CSS, fahami perbezaan antara 'tambah ' ( ) dan 'tilde' (~) pemilih adalah penting. Kedua-dua pemilih digunakan untuk menyasarkan elemen adik-beradik dalam dokumen HTML, tetapi ia mempunyai tujuan yang berbeza.

Mari berikan penjelasan komprehensif untuk menjelaskan perbezaan:

Pemilih ' ' Plus

Pemilih ' ' memilih elemen adik-beradik yang serta-merta mengikut elemen yang ditentukan. Sebagai contoh, 'div p' akan memadankan semua elemen perenggan yang bersebelahan terus dengan elemen 'div' dalam aliran dokumen.

Dalam contoh yang anda berikan, jika anda mempunyai HTML seperti ini:

<code class="html"><div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div></code>

Pemilih 'div p' hanya akan sepadan dengan elemen 'p' pertama, kerana ia bersebelahan dengan elemen 'div' serta-merta.

Pemilih Tilde '~'

Sebaliknya, pemilih '~' memadankan semua elemen adik-beradik yang didahului oleh elemen yang ditentukan, tanpa mengira jaraknya dalam aliran dokumen. Oleh itu, 'div ~ p' akan memilih semua elemen 'p' yang berada di bawah elemen 'div' dalam hierarki HTML.

Dalam contoh yang sama seperti sebelum ini:

<code class="html"><div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div></code>

Pemilih 'div ~ p' akan memadankan kedua-dua elemen 'p' kerana kedua-duanya didahului oleh elemen 'div', walaupun elemen 'p' kedua tidak bersebelahan dengan 'div' serta-merta.'

Memilih Pemilih yang Tepat

Bergantung pada keperluan khusus anda, anda boleh memilih pemilih yang sesuai seperti berikut:

• Gunakan pemilih ' ' apabila anda perlu menyasarkan elemen yang sejurus selepas elemen tertentu.
• Gunakan pemilih '~' apabila anda mahu menyasarkan semua elemen yang mengikuti elemen tertentu dalam struktur dokumen.

Perlu diingat bahawa kedua-dua pemilih sensitif kepada ruang putih, jadi pastikan tiada ruang tambahan atau pemisah baris antara elemen yang ingin anda sasarkan dan elemen rujukan.

Atas ialah kandungan terperinci Adik Beradik CSS: Apakah Perbezaan Antara Pemilih Plus ( ) dan Tilde (~)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!