Bolehkah Anda Menyasarkan Elemen dengan Mana-mana Nama Atribut Menggunakan Pemilih CSS?

Pemilih CSS untuk Penyasaran Atribut Tanpa Pisah

Pengenalan

Pembangunan web sering menggunakan pemilih CSS untuk memanipulasi elemen berdasarkan atribut tertentu . Apabila berurusan dengan atribut data, menjadi penting untuk memahami pilihan penyasaran yang tersedia dan hadnya.

Nama Atribut Kad Liar

Konsep nama atribut kad bebas timbul daripada keperluan untuk memilih elemen yang mempunyai sebarang atribut dalam ruang nama tertentu, tanpa mengira namanya. Walaupun ini mungkin kelihatan seperti penyelesaian yang ideal, pada masa ini tiada pemilih CSS yang boleh mencapai fungsi ini.

Pilihan yang Tersedia

Walau bagaimanapun, terdapat pemilih yang membolehkan anda nilai atribut sasaran berdasarkan corak tertentu:

• [data-something='value'] menyasarkan elemen dengan atribut data bernama "data-something" dan nilai yang betul-betul sama dengan "nilai".
• [data-something^='value'] memilih elemen di mana "data-something" bermula dengan "value".
• [data-something*='value'] menyasarkan elemen di mana "data- sesuatu" mengandungi "nilai".

Menyasarkan Atribut dengan Sebarang Nama

Malangnya, tiada pemilih yang menyasarkan secara langsung elemen dengan SEBARANG nama atribut. Ini bermakna nama atribut kad bebas, seperti [data-*], tidak disokong.

Cadangan untuk Pelaksanaan Masa Hadapan

Perbincangan sedang dijalankan dalam komuniti CSS untuk memperkenalkan sintaks yang lebih komprehensif untuk penyasaran atribut. Satu cadangan yang dicadangkan oleh Simon Pieters melibatkan penggunaan kad bebas dalam pengisytiharan ruang nama:

• x-admin-* sepadan dengan mana-mana atribut dalam ruang nama x-admin.
• [data-my-* ] menyasarkan mana-mana atribut bermula dengan data-my.

Walaupun cadangan ini belum lagi diseragamkan, ia menunjukkan potensi perkembangan masa depan dalam penyasaran atribut.

Atas ialah kandungan terperinci Bolehkah Anda Menyasarkan Elemen dengan Mana-mana Nama Atribut Menggunakan Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!