Bagaimanakah Saya Boleh Memadankan Kelas CSS Dengan Cekap Berdasarkan Awalan?

Pemilih CSS untuk Pemadanan Awalan Kelas

Mencapai aplikasi peraturan CSS berdasarkan awalan kelas tertentu boleh memberikan cabaran. Walaupun CSS 2.1 tidak mempunyai keupayaan ini, CSS3 menawarkan penyelesaian dengan pemilih padanan subrentetan atribut.

Penyelesaian CSS3:

CSS3 memperkenalkan [class^="prefix-" ] dan pemilih [class*=" prefix-"]. Yang pertama memadankan elemen yang atribut kelasnya bermula dengan "prefix-", manakala yang kedua memadankan elemen yang mengandungi "prefix-" selepas aksara ruang putih.

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

Gabungan ini memastikan pemadanan untuk elemen yang atribut kelasnya memenuhi salah satu syarat. . Penggunaan aksara ruang dalam pemilih kedua menghalang padanan untuk elemen dengan nama kelas seperti "bar status". Walau bagaimanapun, ia secara berkesan menyemak kelas berikutnya jika berbilang ditentukan atau mengambil kira pelapik ruang dalam nilai atribut.

Keteguhan:

Perhatikan bahawa menggunakan [kelas= "status-"] sahaja boleh membawa kepada padanan yang tidak diingini, seperti elemen dengan nama kelas seperti "foo-status-bar". Gabungan [class^="status-"] dan [class=" status-"] memberikan keteguhan yang lebih besar.

Pendekatan Alternatif:

Jika boleh dilaksanakan, pertimbangkan untuk membuat kelas khusus dengan awalan status untuk memudahkan peraturan CSS. Pendekatan ini boleh mengelakkan keperluan untuk pemilih atribut yang kompleks.

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