Bolehkah Anda Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS Tulen?

Menggayakan Sauh Berdasarkan Kandungan Menggunakan CSS

Bolehkah anda menggunakan penggayaan yang berbeza pada sauh yang mengandungi perkataan tertentu menggunakan CSS tulen? Walaupun cadangan pemilih :contains telah dipertimbangkan pada masa lalu, ia pada masa ini bukan sebahagian daripada spesifikasi Pemilih CSS3 rasmi.

Penyelesaian:

Memandangkan CSS tulen tidak mempunyai keupayaan untuk menyasarkan sauh berdasarkan kandungannya, JavaScript menjadi penyelesaian alternatif.

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

Skrip ini akan berulang melalui semua pautan pada halaman dan menyemak sama ada ia mengandungi rentetan "SpecificWord" di mana-mana sahaja dalam kandungan HTML mereka . Jika padanan ditemui, warna pautan akan ditetapkan kepada merah, seperti yang dinyatakan dalam sifat gaya.

Penggunaan:

Untuk menggunakan penyelesaian ini, anda boleh membenamkan skrip ke dalam halaman HTML. Berikut ialah contoh:

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

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

Skrip ini akan menjadikan elemen utama pertama menjadi merah, kerana ia mengandungi rentetan "SpecificWord".

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