Bolehkah Pemilih CSS Menyasarkan Elemen Berdasarkan Awalan Kelas?

Pemilih CSS mengikut Awalan Kelas

Soalan:

Adakah layak untuk menggunakan CSS peraturan kepada elemen di mana sekurang-kurangnya satu kelas bermula dengan awalan tertentu? Sebagai contoh, katakan kita mempunyai coretan HTML berikut:

<div>
<p>Bolehkah kita menggunakan peraturan yang hanya menyasarkan div dengan kelas yang bermula dengan "status-"?</p>
<p><strong>Jawapan:</strong></p>
<p><strong>CSS 2.1:</strong></p>
<p>Dalam CSS 2.1, ini tidak boleh dilakukan.</p>
<p><strong>CSS 3:</strong></p>
<p>CSS3 memperkenalkan pemilih padanan subrentetan atribut yang membuat ini mungkin:</p>
<pre class="brush:php;toolbar:false">div[class^="status-"], div[class*=" status-"]

• [class^="status-"] memadankan elemen di mana atribut kelas bermula dengan "status-".
• [class*=" status-"] memadankan elemen di mana atribut kelas mengandungi "status-" terus selepas aksara ruang (memastikan ia bukan sebahagian daripada perkataan lain).

Perhatikan bahawa pemilih yang terakhir termasuk aksara ruang yang disengajakan, kerana nama kelas biasanya dipisahkan oleh ruang. Ini menyemak mana-mana kelas lain dalam atribut kelas elemen dan juga mengendalikan kes di mana atribut kelas berlapik ruang.

Jika anda boleh menjamin bahawa penanda anda tidak akan mempunyai elemen di mana awalan status dibenamkan dalam perkataan lain, anda boleh memudahkan pemilih kepada [class*="status-"]. Walau bagaimanapun, untuk keteguhan, gabungan kedua-dua pemilih disyorkan.

Sebagai alternatif, jika anda mempunyai kawalan ke atas penjanaan HTML, mungkin lebih mudah untuk membuat kelas "status" khusus dengan awalan yang diingini.