Apakah Perbezaan antara Pemilih `div p` dan `div ~ p` dalam CSS?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-11-01 09:03:30

asal

648 orang telah melayarinya

What's the Difference between the `div p` and `div ~ p` Selectors in 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Pemilih ini sepadan dengan semua

elemen yang secara langsung mengikuti

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Melumpuhkan Tatal Mendatar pada Tapak Web Anda? Artikel seterusnya：Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan CSS?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1726

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1884

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1597

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...