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

Menggunakan Kad Liar dalam CSS untuk Kelas: * dan Pemilih Atribut

Apabila menggayakan elemen dengan berbilang kelas yang mengikut corak tertentu, ia boleh membosankan untuk mencipta peraturan berasingan untuk setiap variasi. Di sinilah kad bebas CSS dimainkan.

Dalam kes anda, anda ingin menggunakan warna latar belakang pada berbilang elemen dengan nama kelas seperti "tocolor-1", "tocolor-2", "tocolor-3" , dsb. Semasa menggunakan kad bebas seperti ".tocolor-*" mungkin kelihatan seperti penyelesaian, ia tidak berfungsi dalam CSS.

Sebaliknya, anda boleh memanfaatkan pemilih atribut untuk mencapai matlamat ini. Pemilih atribut membenarkan anda menyasarkan elemen berdasarkan atributnya, seperti kelas.

[class^="tocolor-"], [class*=" tocolor-"] {
  background: red;
}

Dalam kod ini, pemilih atribut [class^="tocolor-"] menyasarkan elemen yang atribut kelasnya bermula dengan " tocolor-", dengan berkesan memadankan semua elemen dengan nama kelas seperti "tocolor-1", "tocolor-2", dan sebagainya.

Pemilih [class*=" tocolor-"] menyasarkan elemen yang atribut kelasnya mengandungi subrentetan "tocolor-" diikuti dengan aksara ruang. Ini memadankan elemen seperti "tocolor-highlight", "my-class tocolor-blue", dll.

Dengan menggunakan pemilih atribut, anda boleh menggunakan gaya pada sekumpulan elemen berdasarkan corak kongsinya, tanpa perlu untuk pengisytiharan kelas bertele-tele dan berulang.

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

• [Pemilih Atribut CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [Pemilih atribut CSS] (https://www.w3schools.com/cssref/css_selectors.asp)

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