Bolehkah Pemilih CSS Menyasarkan Elemen Berdasarkan Keadaan Elemen Lain?

Cara Memilih Elemen Berdasarkan Keadaan Elemen Lain dengan CSS

Pengenalan

Menyasarkan elemen khusus sentiasa menjadi aspek asas CSS. Walau bagaimanapun, kerumitan timbul apabila kita perlu menggayakan elemen berdasarkan keadaan elemen lain dalam halaman. Artikel ini meneroka pengehadan pemilih CSS semasa dan memperkenalkan penyelesaian yang berpotensi daripada piawaian yang akan datang.

Batasan Pemilih CSS Semasa

Pemilih CSS mempunyai beberapa batasan dalam memilih elemen berdasarkan keadaan orang lain. Pertama, mereka tidak boleh mengakses secara langsung keadaan elemen menggunakan pemilih induk atau pemilih saudara terdahulu. Kedua, mereka hanya boleh menyasarkan satu elemen sebagai subjek pemilih, menghalang kami daripada menggunakan gaya pada berbilang elemen berdasarkan syarat.

Contoh: Elemen Sasaran Berdasarkan Keadaan Tuding

Katakan kita mempunyai berbilang bahagian pada halaman. Setiap bahagian mengandungi div dengan atribut data "selesai" yang mewakili statusnya. Kami ingin menambah jidar berwarna pada elemen berkelip dan berputar di bahagian seterusnya apabila div dengan atribut "selesai" dilegar. Pemilih CSS yang mudah untuk ini ialah:

section:hover + section .blink,
section:hover + section .spin {
  border: 1px solid red;
}

Walau bagaimanapun, ini tidak berfungsi kerana CSS tidak mempunyai pemilih induk untuk menyasarkan div dalam bahagian pertama.

Penyelesaian Potensi: Selectors 4 dan :has()

Draf Selectors 4 yang akan datang memperkenalkan pseudo-class dipanggil :has() yang menyelesaikan masalah ini. :has() membolehkan kita memilih elemen yang mempunyai keturunan tertentu. Ia memerlukan hujah pemilih relatif yang sepadan dengan turunan unsur yang digunakan.

Penyelesaian menggunakan :has() untuk masalah di atas ialah:

section:has(div[data-status~=finished]) + section div:matches(.blink, .spin) {
  border: 1px solid red;
}

Di sini, : has() memastikan bahawa pemilih hanya menyasarkan bahagian yang mengandungi div dengan status "selesai". Ia juga menggabungkan penggabung kanak-kanak dengan :matches() untuk menyasarkan kedua-dua elemen berkelip dan berputar dalam bahagian seterusnya.

Kesimpulan

Walaupun pemilih CSS semasa mempunyai had dalam memilih elemen berdasarkan keadaan orang lain, kelas pseudo :has() yang akan datang dalam Selectors 4 menyediakan penyelesaian yang berpotensi. Ia mempertingkatkan sintaks pemilih, membolehkan lebih fleksibiliti dan penyasaran elemen bersyarat.

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