Bagaimanakah Saya Boleh Memilih Elemen DOM Berdasarkan Keadaan Elemen Lain Menggunakan Pemilih CSS?

Memilih Elemen Berdasarkan Perhubungan Negeri dalam CSS

Masalah: Pilih elemen lain dalam DOM berdasarkan yang ditentukan keadaan sesuatu unsur.

Syarat untuk Memilih:

• Mewakili keadaan menggunakan pemilih mudah (cth., div, [status-data~=selesai]).
• Nyatakan perhubungan struktur menggunakan penggabung untuk membentuk pemilih kompleks .
• Jadikan elemen yang disasarkan sebagai subjek kompleks pemilih.

Had Semasa:

Malangnya, syarat ini tidak semua dapat dipenuhi menggunakan Pemilih CSS semasa, disebabkan oleh:

• Kekurangan pemilih induk (untuk menyasarkan nenek moyang elemen subjek)
• Kekurangan pemilih adik-beradik sebelumnya (untuk menyasarkan adik-beradik yang datang sebelum elemen subjek)

Keupayaan Akan Datang:

Piawaian CSS Selectors 4 yang akan datang memperkenalkan ciri yang menangani perkara ini had:

• :perlawanan() pseudo-class: Kumpulan berbilang pemilih kompaun.
• :has() pseudo-class: Memilih elemen yang mengandungi elemen anak yang sepadan dengan pemilih.

Menyelesaikan Contoh Masalah:

Menggunakan :has() dan :matches(), kita boleh menyelesaikan masalah contoh dalam CSS Selectors 4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

Pendekatan Alternatif dengan JavaScript:

Walaupun ciri ini belum lagi disokong oleh semua penyemak imbas, anda kini boleh menggunakan JavaScript untuk memilih elemen menggunakan :has():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

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