Bagaimanakah CSS Boleh Menyasarkan Elemen Secara Selektif Berdasarkan Atribut Adik Beradik?

Cara CSS Memilih Elemen Berdasarkan Keadaan Elemen Lain

Mengenal pasti dan menyasarkan elemen berdasarkan keadaan elemen lain dalam DOM boleh mencabar . Pemilih CSS menawarkan pilihan terhad kerana kekangan yang dikenakan oleh penggabung dan sintaks pemilih. Walaupun beberapa teknik asas boleh digunakan, termasuk perhubungan ibu bapa-anak dan penggunaan kelas pseudo, senario tertentu memerlukan penyelesaian yang lebih maju.

Batasan Pelaksanaan Semasa

Pemilih 3, piawaian semasa, tidak mempunyai ciri penting seperti pemilih ibu bapa atau pemilih adik-beradik terdahulu. Ciri-ciri ini akan meluaskan keupayaan CSS untuk menstruktur dan menyasarkan elemen. Ketidakupayaan untuk menentukan subjek pemilih juga memberikan kekangan.

Potensi dalam Pemilih Akan Datang 4

Piawaian Pemilih 4 yang akan datang bertujuan untuk menangani batasan ini. Kelas pseudo :has(), yang diilhamkan oleh fungsi jQuery, menyediakan penyelesaian yang fleksibel. :has() membolehkan pemilihan elemen berdasarkan kehadiran elemen lain dalam induknya.

Menyelesaikan Masalah

Contoh masalah yang dikemukakan dalam soalan, yang mana memerlukan elemen penyasaran berdasarkan atribut status data elemen lain, boleh diselesaikan menggunakan :has() dalam Selectors 4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

Ini pemilih mencapai hasil yang diingini dengan menggunakan :has() untuk memilih bahagian yang mengandungi div kanak-kanak dengan status data yang ditentukan, dan kemudian menyasarkan elemen div bahagian berikutnya yang sepadan dengan sama ada kelas .blink atau .spin.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Menyasarkan Elemen Secara Selektif Berdasarkan Atribut Adik Beradik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!