Mengapa Pemilih `:huruf pertama` CSS Saya Tidak Berfungsi pada Elemen Span?

CSS :huruf pertama Tidak Berfungsi

Konteks

Percubaan untuk menggayakan huruf pertama bahagian tajuk yang dijana menggunakan output HTML Microsoft Word telah gagal menggunakan :pemilih huruf pertama. HTML mengandungi elemen span dengan pelbagai gaya sebaris.

Penyelesaian

Isu timbul kerana :huruf pertama hanya berfungsi pada elemen peringkat blok, seperti yang ditakrifkan dalam dokumentasi MDN. Dalam kes ini, elemen span ialah elemen sebaris.

Untuk menyelesaikan isu ini, terdapat dua pilihan:

1. Gunakan :huruf pertama pada elemen perenggan yang dilampirkan.

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

2. Tetapkan elemen span untuk dipaparkan sebagai blok sebaris dan gunakan :huruf pertama kepada ia.

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

Nota

• :huruf pertama tidak menjejaskan elemen yang didahului oleh kandungan seperti imej atau jadual sebaris pada baris yang sama.
• Menggunakan :sebelum sebelum :huruf pertama menggunakan penggayaan pada elemen :before dan bukannya yang pertama surat.

Atas ialah kandungan terperinci Mengapa Pemilih `:huruf pertama` CSS Saya Tidak Berfungsi pada Elemen Span?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!