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

mengandungi senarai dan anda ingin menyerlahkan perenggan pertama selepas setiap senarai, anda boleh menggunakan:

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

Bila Gunakan Pemilih Tilde

Gunakan pemilih ~ apabila anda ingin menyasarkan semua elemen yang didahului oleh elemen yang diberikan, walaupun terdapat elemen lain di antaranya. Contohnya, jika anda ingin menyerlahkan semua tajuk selepas

elemen:

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

Kes Khas: Memilih Elemen Mendahului Elemen Diberi

Jika anda perlu memilih elemen yang diletakkan segera sebelum elemen yang diberikan, terdapat pemilih berbeza: pemilih adik beradik bersebelahan X Y.

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

Pemilih ini sepadan dengan semua

elemen yang secara langsung mengikuti

elemen, tanpa unsur lain di antaranya.

Atas ialah kandungan terperinci Apakah Perbezaan antara Pemilih `div p` dan `div ~ p` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html if for select this ul

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Melumpuhkan Tatal Mendatar pada Tapak Web Anda?Artikel seterusnya：Bagaimana untuk Melumpuhkan Tatal Mendatar pada Tapak Web Anda?

Artikel berkaitan

Lihat lagi

• Bolehkah Anda Mengubah Warna Latar Belakang Pilihan Senarai Pilih pada Hover dengan HTML dan CSS?
• Mengapa Bayang Kotak Inset Saya Tidak Berfungsi pada Imej dalam CSS?
• Bagaimanakah Saya Boleh Melukis Segi Tiga di Sudut Div Menggunakan Kedudukan Mutlak?
• Bagaimana untuk Membetulkan Isu Imej Latar Belakang untuk Pilihan Dropdown dalam Chrome?
• Bagaimana untuk Menghalang Peralihan CSS daripada Mencetuskan pada Muatan Halaman dalam Google Chrome?