Bolehkah Kad Liar CSS Memperkemas Penggayaan Kelas Dinamik dengan Pengecam Unik?

Menggunakan Kad Liar CSS untuk Penggayaan Kelas Dinamik

Dalam menggayakan elemen HTML, adalah perkara biasa untuk menemui pengecam unik bersama kelas utama. Dalam senario yang disediakan, berbilang div digayakan menggunakan kelas "tocolor", tetapi setiap satu memerlukan pengecam unik tambahan, seperti "tocolor-1," "tocolor-2," dan sebagainya.

Soalannya timbul: adakah terdapat cara untuk menyelaraskan ini dengan menggunakan kad bebas () dalam pemilih CSS? Percubaan awal menggunakan ".tocolor-" tidak membuahkan hasil.

Penyelesaian terletak pada memanfaatkan pemilih atribut. Pemilih atribut membolehkan anda menyasarkan elemen berdasarkan atributnya, seperti kelasnya. Dalam kes ini, pemilih berikut akan mencapai kesan yang diingini:

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

Pemilih "[class^="tocolor-"]" menyasarkan elemen yang atribut kelasnya bermula dengan "tocolor-," manakala " Pemilih [class*=" tocolor-"]" menyasarkan elemen yang atribut kelasnya mengandungi subrentetan "tocolor-" mengikut aksara ruang.

Pecahan Pemilih:

• "[class^="tocolor-"]": Memadankan elemen dengan atribut kelas yang bermula dengan "tocolor-," seperti "tocolor-1," "tocolor- 2," dan seterusnya.
• "[class*=" tocolor-"]": Memadankan elemen dengan atribut kelas yang mengandungi subrentetan "tocolor-" serta-merta didahului oleh aksara ruang, seperti "tocolor-1," "test tocolor-2," dan sebagainya.

Dengan menggunakan pemilih atribut ini, anda boleh menggunakan penggayaan yang diingini kepada berbilang elemen dengan pengecam unik yang berbeza menggunakan satu pemilih kelas. Ini memudahkan kod CSS dan meningkatkan kebolehselenggaraan.

Atas ialah kandungan terperinci Bolehkah Kad Liar CSS Memperkemas Penggayaan Kelas Dinamik dengan Pengecam Unik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!