Bolehkah saya Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS?

Peraturan CSS Berdasarkan Kandungan

Bolehkah CSS digunakan untuk menggunakan gaya yang berbeza pada sauh yang mengandungi perkataan tertentu?

Jawapan

Malangnya, CSS tulen tidak menawarkan penyelesaian asli kepada elemen gaya berdasarkan kandungannya. Pemilih ':contains' yang dicadangkan bukan sebahagian daripada Draf Kerja Pemilih CSS3 semasa.

Penyelesaian JavaScript

Untuk mencapai fungsi ini, JavaScript boleh digunakan. Sebagai contoh, coretan kod berikut berulang melalui semua pautan dalam dokumen dan menggunakan warna merah pada mana-mana sauh yang kandungannya sepadan dengan rentetan "SpecificWord":

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

Contoh HTML ini menunjukkan kesan skrip:

<a href="#">SpecificWord</a>
<a href="#">OtherWords</a>

Setelah dilaksanakan, sauh pertama akan digayakan dengan warna merah, manakala sauh kedua akan mengekalkan lalainya penggayaan.

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