Pemilih berasaskan perhubungan: contoh pemilihan elemen HTML yang tepat

Contoh demonstrasi: Menggunakan pemilih hubungan untuk memilih elemen HTML dengan tepat memerlukan contoh kod khusus

Dalam pembangunan HTML, kita selalunya perlu menggunakan pemilih untuk menentukan elemen yang akan dikendalikan atau diubah suai dengan tepat. CSS menyediakan banyak pemilih untuk memadankan elemen yang berbeza, antaranya pemilih perhubungan boleh memilih elemen dengan lebih tepat berdasarkan perhubungan antara elemen. Di bawah saya akan menggunakan beberapa contoh kod khusus untuk menunjukkan cara menggunakan pemilih hubungan untuk memilih elemen HTML dengan tepat.

1. Pemilih elemen kanak-kanak (penggabung kanak-kanak)

Pemilih elemen kanak-kanak digunakan untuk memilih elemen anak langsung bagi elemen yang ditentukan. Ia menggunakan tanda lebih besar daripada (>) untuk menunjukkan hubungan antara unsur. Sebagai contoh, kod berikut akan memilih semua elemen dengan kelas "ibu bapa" yang merupakan anak langsung elemen dengan kelas "anak":

.parent > .child {
  color: red;
}

2. penggabung adik beradik bersebelahan (penggabung adik beradik bersebelahan)

Pemilih adik beradik bersebelahan menggunakan Memilih elemen adik beradik serta-merta mengikut elemen yang ditentukan. Ia menggunakan tanda tambah (+) untuk menunjukkan hubungan antara unsur. Sebagai contoh, kod berikut akan memilih semua elemen dengan kelas "first" diikuti dengan elemen dengan kelas "second":

.first + .second {
  color: blue;
}

3. General sibling combinator (general sibling combinator)

General sibling selector digunakan untuk pemilihan Semua adik-beradik elemen mengikut elemen yang ditentukan. Ia menggunakan tilde (~) untuk menunjukkan hubungan antara unsur. Sebagai contoh, kod berikut akan memilih semua elemen dengan kelas "kedua" selepas semua elemen dengan kelas "pertama":

.first ~ .second {
  color: green;
}

4. Pemilih keturunan (penggabung keturunan)

Pemilih keturunan digunakan untuk memilih semua elemen di dalam elemen yang ditentukan Unsur keturunan. Ia menggunakan ruang untuk menunjukkan hubungan antara elemen. Sebagai contoh, kod berikut akan memilih semua elemen dengan kelas "anak" di dalam semua elemen dengan kelas "ibu bapa":

.parent .child {
  font-size: 16px;
}

Di atas adalah contoh beberapa pemilih hubungan yang biasa digunakan. Dengan menggunakan pemilih ini, kami boleh memilih elemen HTML untuk dimanipulasi dengan lebih tepat, dengan itu mencapai pengubahsuaian gaya atau kesan interaktif yang lain. Pada masa yang sama, kami juga boleh menggabungkan pemilih ini mengikut keperluan sebenar untuk mencapai tujuan pemilihan yang lebih kompleks.

Perlu diingat bahawa apabila menggunakan pemilih hubungan, kita harus memilih pemilih yang sesuai secara fleksibel mengikut situasi sebenar untuk mengelakkan masalah prestasi yang disebabkan oleh penggunaan pemilih yang terlalu kompleks. Di samping itu, untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod, adalah disyorkan untuk menggunakan nama kelas semantik dalam CSS untuk menamakan elemen dan menstrukturkan dokumen HTML secara munasabah.

Ringkasnya, pemilih hubungan ialah salah satu pemilih yang biasa digunakan dalam CSS, yang boleh memilih elemen HTML dengan tepat melalui perhubungan antara elemen. Menunjukkan penggunaan pemilih elemen anak, pemilih adik beradik bersebelahan, pemilih adik beradik am dan pemilih keturunan melalui contoh. Dengan menggunakan pemilih ini secara fleksibel, kami boleh memilih elemen HTML yang ditentukan dengan mudah untuk mencapai operasi gaya yang lebih cekap atau kesan interaktif yang lain. Dalam pembangunan sebenar, kita harus memilih pemilih yang sesuai berdasarkan keperluan sebenar dan mengikut gaya pengaturcaraan yang diseragamkan dan boleh diselenggara untuk meningkatkan kualiti kod.

Atas ialah kandungan terperinci Pemilih berasaskan perhubungan: contoh pemilihan elemen HTML yang tepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!