Bolehkah CSS Menggayakan Watak Individu Secara Terus, dan Jika Tidak, Apakah Alternatifnya?

Menggayakan Aksara Khusus dengan CSS

Ia mungkin kelihatan seperti regangan, tetapi adakah mungkin untuk menggunakan gaya CSS untuk menyasarkan dan mengubah suai aksara tertentu dalam a teks?

Jawapan

Malangnya, CSS tulen tidak membenarkan penggayaan yang disasarkan bagi aksara tertentu. CSS beroperasi pada tahap elemen atau blok, bermakna ia boleh memanipulasi sifat keseluruhan elemen (seperti perenggan, tajuk atau perkataan individu), tetapi ia tidak mempunyai kawalan terperinci yang diperlukan untuk mengubah suai aksara individu.

Walau bagaimanapun , terdapat pendekatan alternatif untuk mencapai kesan yang diingini, terutamanya dengan bantuan JavaScript dan manipulasi DOM:

JavaScript Penyelesaian

Satu penyelesaian yang mungkin melibatkan memanfaatkan JavaScript untuk mencari dan menggayakan aksara tertentu dalam rentetan tertentu. Dengan menggunakan sifat innerHTML dan ungkapan biasa, anda boleh membungkus aksara yang disasarkan dalam elemen span dengan penggayaan yang diingini.

Berikut ialah contoh fungsi JavaScript yang menyerlahkan semua tika aksara tertentu (dalam kes ini, huruf "Z") dalam merah:

jQuery.fn.highlight = function(str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function() {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z", "highlight");

Demo

Lihat demo JSFiddle ini untuk melihat penyelesaian JavaScript dalam tindakan: [JSFiddle Link]

Pendekatan JavaScript ini membenarkan penyasaran dan penggayaan yang tepat bagi watak tertentu, menyediakan penyelesaian untuk kekurangan pilihan penggayaan peringkat watak langsung dalam CSS.

Atas ialah kandungan terperinci Bolehkah CSS Menggayakan Watak Individu Secara Terus, dan Jika Tidak, Apakah Alternatifnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!