Bolehkah CSS Memilih Elemen Berdasarkan Awalan Kelas?

Adakah Pemilihan Kelas CSS Berasaskan Awalan Mungkin?

Dalam bidang pembangunan web, selalunya perlu untuk menggunakan peraturan CSS pada elemen berasaskan pada awalan kelas tertentu. Sebagai contoh, anda mungkin mahu menyasarkan elemen yang kelasnya bermula dengan awalan "status-".

Tidak boleh melakukannya dengan CSS2.1

Malangnya, CSS2 .1 tidak menyediakan sebarang cara langsung untuk mencapai pemilihan kelas berasaskan awalan. Walau bagaimanapun, pemilih padanan subrentetan atribut CSS3 membantu kami.

Pemilihan Berasaskan Awalan dengan CSS3

CSS3 memperkenalkan dua pemilih atribut yang boleh membantu kami:

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

Pecahan Pemilih:

• [class^="status-"] - Memadankan elemen yang atribut kelasnya bermula dengan "status-".
• [class*=" status-" ] - Memadankan elemen yang atribut kelasnya mengandungi "status-" dalam rentetan yang dipisahkan ruang putih.

Menggabungkan kedua-dua pemilih ini memastikan kami menangkap semua elemen yang sesuai, walaupun yang mempunyai berbilang kelas yang dipisahkan ruang.

Satu lagi Gotcha

Perhatikan bahawa hanya menggunakan [class*="status-"] mungkin juga sepadan dengan elemen seperti:

<div>

Untuk mengelakkan perkara ini, sebaiknya gabungkan dua pemilih seperti yang ditunjukkan di atas.

Pilihan Lain

Jika anda mempunyai kawalan ke atas penanda HTML, pendekatan yang lebih mudah ialah memisahkan awalan status ke dalam kelasnya sendiri, seperti:

<div>

Ini membolehkan anda menyasarkan elemen dengan [class="status-important"].

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