Bagaimanakah Saya Boleh Menggayakan Pelbagai Elemen dengan Cekap dengan Nama Kelas Serupa dalam CSS?

Menggayakan Berbilang Elemen dengan Kad Liar dalam CSS

Apabila menggayakan elemen dengan pengecam unik, ia boleh menjadi membosankan untuk membuat kelas berasingan untuk setiap satu. CSS menyediakan penyelesaian yang elegan dengan aksara kad bebas *.

Menggunakan Wildcard untuk Kelas

Dalam contoh anda, anda mempunyai berbilang div dengan dua kelas setiap satu, satu kelas biasa ( tocolor) dan pengecam individu (cth., tocolor-1). Untuk menggayakannya dengan satu kelas, anda boleh menggunakan sintaks kad bebas berikut:

.tocolor-* {
  background: red;
}

Walau bagaimanapun, seperti yang anda dapati, kaedah ini tidak berfungsi dalam CSS.

Pemilih Atribut kepada Rescue

Pendekatan yang betul ialah menggunakan pemilih atribut, yang membolehkan anda memilih elemen berdasarkan nilai sifat-sifat mereka. Dalam kes ini, anda boleh menggunakan atribut kelas:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] memilih elemen yang atribut kelasnya bermula dengan "tocolor-".
• [class*=" tocolor-"] memilih elemen yang atribut kelasnya mengandungi "tocolor-".

Dalam contoh anda, kedua-dua syarat akan sepadan dengan div dengan kelas kepada warna-1, warna-2, dll.

Demo dan Maklumat Lanjut

Anda boleh melihat demonstrasi langsung penyelesaian ini di:

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

Untuk mendapatkan maklumat lanjut tentang pemilih atribut CSS, rujuk perkara berikut sumber:

• [Atribut CSS Pemilih](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN Docs: Attribute Selectors](https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selectors)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Pelbagai Elemen dengan Cekap dengan Nama Kelas Serupa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!