Bagaimanakah Saya Boleh Menggayakan Elemen dengan Berbilang Pengecam Unik Menggunakan Kad Liar dan Pemilih Atribut CSS?

Menggayakan Elemen dengan Berbilang Pengecam Unik Menggunakan Kad Liar dalam CSS

Dalam pembangunan bahagian hadapan, selalunya perlu untuk menggayakan elemen berdasarkan kedua-dua kelas biasa dan pengecam unik. Pertimbangkan senario berikut:

Kami mempunyai berbilang div yang ingin kami gayakan dengan latar belakang merah menggunakan kelas ".tocolor." Walau bagaimanapun, kami juga perlu mengenal pasti secara unik setiap div dengan nombor (cth., tocolor-1, tocolor-2, tocolor-3).

Pada mulanya, kami cuba menggunakan kad bebas untuk memudahkan penggayaan, seperti yang ditunjukkan di bawah:

.tocolor-* {
  background: red;
}

Bagaimanapun, kaedah ini tidak berkesan. Penyelesaian kepada masalah ini terletak pada pemilih atribut CSS. Dengan menyasarkan atribut kelas elemen, kita boleh menggayakan elemen berdasarkan corak tertentu.

Pemilih Atribut untuk Penggayaan dengan Kad Liar

Terdapat dua jenis pemilih atribut yang boleh digunakan dalam senario ini:

• [attribute^="value"]: Padanan elemen yang atributnya bermula dengan nilai yang ditentukan.
• [attribute*="value"]: Memadankan elemen yang atributnya mengandungi nilai yang ditentukan.

Untuk struktur HTML yang diberikan:

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

Kita boleh menggunakan atribut berikut pemilih:

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

• [class^="tocolor-"]: Memadankan semua div yang atribut kelasnya bermula dengan "tocolor-".
• [class*=" tocolor-"]: Memadankan semua div yang atribut kelasnya mengandungi subrentetan "tocolor-".

Penggunaan dan Demonstrasi

Dengan menggunakan pemilih atribut ini, kami boleh menggayakan elemen secara berkesan berdasarkan kedua-dua kelas ".tocolor" biasa dan pengecam unik, seperti yang ditunjukkan dalam demo berikut:

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

Sumber untuk Pembelajaran Lanjut

• Pemilih Atribut CSS: https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• MDN Docs on Attribute Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen dengan Berbilang Pengecam Unik Menggunakan Kad Liar dan Pemilih Atribut CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!