Bagaimanakah Saya Boleh Menyasarkan Elemen CSS Berdasarkan Keadaan Elemen Lain?

Bagaimanakah Menyasarkan Elemen Secara Selektif Berdasarkan Keadaan Elemen Lain dengan CSS?

Dalam CSS, menyasarkan elemen berdasarkan keadaan elemen lain elemen boleh mencabar kerana batasan dalam sintaks pemilih semasa. Untuk memahami keadaan sepenuhnya, kami akan meneroka tiga keadaan kritikal yang menjejaskan keupayaan ini.

Syarat untuk Memilih Elemen Berdasarkan Negeri:

1. Perwakilan Keadaan Unsur: Bolehkah keadaan sasaran dan elemen rujukan diwakili menggunakan mudah sedia ada pemilih?
2. Hubungan Struktur: Bolehkah kita mewujudkan hubungan struktur antara elemen menggunakan penggabung?
3. Subjek Pemilih: Bolehkah elemen sasaran ditetapkan sebagai subjek kompleks pemilih?

Penghadan dalam Pemilih Semasa:

Keterbatasan utama terletak pada kekurangan ibu bapa atau pemilih adik-beradik terdahulu. Kekurangan ini menjadikannya mustahil untuk mewujudkan hubungan seperti:

• Ibu bapa kepada anak: Mengenal pasti unsur anak berdasarkan keadaan induknya
• Seterusnya adik-beradik kepada adik-beradik kemudian: Memilih adik-beradik kemudian berdasarkan keadaan sebelumnya adik beradik

Potensi Penyelesaian dengan Selectors 4 dan :has() Pseudo-Class:

Walaupun standard Selectors semasa tidak menangani isu ini, kemajuan akan datang dalam Selectors 4 memperkenalkan :has() pseudo-class, yang berpotensi untuk mengurangkan batasan ini. :has() membenarkan pemilih mencari elemen turunan tertentu dalam elemen induk yang digunakan.

Contohnya:

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

Pemilih ini mengenal pasti sebarang elemen div dalam bahagian seterusnya yang mempunyai sama ada kelas ".blink" atau ".spin", dengan syarat bahagian sebelumnya mengandungi div dengan "selesai" atribut.

Nota: Kelas pseudo :matches() sedang dibangunkan dan belum lagi disokong oleh semua penyemak imbas.

Sebagai penyelesaian sementara, anda boleh melaksanakan logik ini secara manual dalam Javascript menggunakan fungsi seperti Document.querySelector() untuk memilih elemen yang memenuhi syarat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Elemen CSS Berdasarkan Keadaan Elemen Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!