Mengapa Pemilih CSS :huruf pertama Saya Tidak Bekerja pada HTML daripada Microsoft Word?

CSS :Pemilih Huruf pertama Tidak Berfungsi

Apabila berurusan dengan kod HTML yang diekstrak daripada dokumen Microsoft Word, isu penggayaan boleh timbul. Dalam kes ini, kami mendapati bahawa menggunakan pemilih :huruf pertama pada HTML yang dijana daripada Word tidak menghasilkan kesan yang diingini.

Cabarannya terletak pada fakta bahawa pemilih :huruf pertama hanya serasi dengan elemen blok. Dalam HTML yang disediakan, huruf pertama tajuk berada dalam baris elemen, yang bukan elemen blok.

Penyelesaian 1: Guna :huruf pertama pada Elemen Blok

Penyelesaian mudah ialah menggunakan pemilih :huruf pertama pada .

p::first-letter {
    font-size: 500px;
}

Penyelesaian 2: Gunakan Span Tahap Blok

Jika mengubah suai penanda asal tidak boleh dilaksanakan, pendekatan alternatif ialah untuk menyatakan secara eksplisit sifat paparan sebagai blok untuk elemen yang mengandungi huruf pertama:

p b span::first-letter {
    font-size: 500px !important;
}
span {
    display: block;
}

Penjelasan

Pemilih :huruf pertama hanya mempengaruhi huruf pertama elemen peringkat blok, iaitu elemen bekas yang bermula pada yang baharu barisan. Contoh elemen peringkat blok termasuk perenggan, tajuk dan sel jadual. Elemen sebaris, seperti , tidak boleh dipilih menggunakan elemen pseudo ini.

Dengan mengubah suai elemen menjadi tahap blok, kami secara berkesan memaksanya berkelakuan seperti elemen blok, membenarkan pemilih :huruf pertama digunakan dengan betul.

Atas ialah kandungan terperinci Mengapa Pemilih CSS :huruf pertama Saya Tidak Bekerja pada HTML daripada Microsoft Word?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!