Bolehkah Anda Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS Sahaja?

Pemilih Berasaskan Kandungan Penyasaran Peraturan CSS

Timbul persoalan sama ada mungkin untuk menggunakan gaya yang berbeza pada sauh yang mengandungi perkataan tertentu menggunakan tulen CSS, termasuk CSS3. Disebabkan oleh batasan teknikal, CSS sahaja tidak mempunyai kefungsian untuk memilih elemen berdasarkan kandungannya.

Penjelasan:

Sementara pemilih ":contains" pernah dicadangkan sebagai penyelesaian yang berpotensi, ia belum dimasukkan ke dalam Draf Kerja Pemilih CSS3. Oleh itu, menggunakan CSS secara eksklusif untuk menyasarkan elemen berdasarkan kandungannya adalah tidak boleh dilaksanakan.

Pendekatan Alternatif:

Sebagai penyelesaian, JavaScript boleh digunakan untuk melaksanakan fungsi ini. Satu pendekatan akan melibatkan lelaran melalui semua sauh pada halaman dan menguji HTML dalaman mereka untuk kehadiran perkataan yang dikehendaki menggunakan ungkapan biasa. Jika padanan ditemui, gaya penambat boleh diubah suai dengan sewajarnya.

Contoh Kod:

Kod JavaScript berikut menunjukkan cara ini boleh dicapai:

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

Dalam contoh ini, semua sauh pada halaman diulang dan jika HTML dalaman sauh mengandungi perkataan "SpecificWord" (tidak peka huruf besar-kecil), warnanya ditetapkan kepada merah.

Nota:

Walaupun tiada penyelesaian langsung dalam CSS tulen, JavaScript menyediakan fleksibel penyelesaian untuk menggunakan penggayaan berasaskan kandungan.

Atas ialah kandungan terperinci Bolehkah Anda Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!