Bagaimanakah Saya Boleh Memilih Elemen CSS Berdasarkan Awalan Kelas?

Pemilih CSS Berasaskan Atribut untuk Awalan Kelas

Dalam CSS, mengenal pasti elemen berdasarkan awalan kelas boleh menjadi tugas yang membingungkan. Pertimbangkan senario di mana anda ingin menggunakan peraturan pada mana-mana elemen yang kelasnya bermula dengan awalan tertentu, seperti "status-".

Keserasian CSS

Malangnya, CSS 2.1 tidak mempunyai pemilih yang diperlukan untuk tugas ini. Walau bagaimanapun, CSS3 memperkenalkan pemilih padanan subrentetan atribut, yang membuka kemungkinan baharu.

Pemilih Atribut CSS3

Pemilih atribut CSS3 yang boleh menangani cabaran ini ialah:

• [class^="status-"]: Memadankan elemen yang atribut kelasnya bermula dengan "status-".
• [class*=" status-"]: Memadankan elemen yang atribut kelasnya mengandungi subrentetan "status-" serta-merta didahului oleh aksara ruang putih. Perhatikan watak ruang, yang memastikan padanan tidak dibuat pada kelas lain.

Gabungan Pemilih

Untuk menangkap semua elemen yang diingini, anda mesti menggabungkan ini dua pemilih:

div[class^="status-"], div[class*=" status-"]

Gabungan ini memastikan elemen dengan kelas bermula dengan "status-" dan elemen dengan subrentetan "status-" berikutan aksara ruang putih kedua-duanya dipilih.

Awas dan Alternatif

Perlu diingat bahawa pemilih [class*="status-"] boleh padankan elemen yang tidak diingini jika HTML anda termasuk kelas seperti "foo-status-bar". Untuk mengelakkan ini, pastikan senario sedemikian adalah mustahil.

Sebagai alternatif, jika anda mempunyai kawalan ke atas HTML atau aplikasi yang menjana penanda, mungkin lebih mudah untuk membuat kelas "status" khusus dengan awalan sendiri. Ini memudahkan proses dan memastikan konsistensi.

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