Bagaimanakah Saya Boleh Menggayakan Berbilang Div dengan Nama Kelas Serupa Menggunakan Pemilih CSS?

Menggunakan Kad Liar dalam Kelas CSS

Dalam pertanyaan anda, anda menyasarkan untuk menggayakan berbilang div dengan kelas biasa "tocolor" sambil menyertakan pengecam unik (cth., tocolor-1 , tocolor-2). Anda cuba memudahkan perkara ini menggunakan kad bebas "*" dalam CSS, tetapi ia terbukti tidak berjaya.

Untuk mencapai hasil yang anda inginkan, kami memperkenalkan pemilih atribut dalam CSS. Pemilih atribut membenarkan anda menyasarkan elemen berdasarkan atribut tertentu, seperti nilai kelasnya.

Untuk senario anda, anda boleh menggunakan pemilih CSS berikut:

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

Begini cara ia berfungsi:

• [class^="tocolor-"]: Pemilih ini sepadan dengan elemen yang atribut kelasnya bermula dengan "tocolor-".
• [class*=" tocolor-"]: Pemilih ini sepadan dengan elemen yang atribut kelasnya mengandungi "tocolor-" di mana-mana dalam rentetan, didahului oleh aksara ruang.

Dengan menggabungkan dua pemilih ini, anda boleh menyasarkan mana-mana elemen dengan kelas yang memenuhi salah satu daripada kriteria ini.

Sebagai contoh, memandangkan HTML berikut struktur:

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

Menggunakan pemilih CSS di atas akan menetapkan warna semua div ini kepada merah.

Lihat demo interaktif ini di JSFiddle: http://jsfiddle.net/K3693 /1/

Untuk maklumat yang lebih komprehensif tentang pemilih atribut CSS, rujuk perkara berikut sumber:

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

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