Pourquoi mon sélecteur CSS `:first-letter` ne fonctionne-t-il pas sur un élément Span ?

CSS : première lettre ne fonctionne pas

Contexte

Une tentative de style de la première lettre d'une section de titre générée à l'aide de la sortie HTML de Microsoft Word a a échoué en utilisant le sélecteur :first-letter. Le HTML contient un élément span avec différents styles en ligne.

Solution

Le problème se pose car :first-letter ne fonctionne que sur les éléments de niveau bloc, tels que définis dans la documentation MDN. Dans ce cas, l'élément span est un élément en ligne.

Pour résoudre le problème, il existe deux options :

1. Appliquer :first-letter à l'élément de paragraphe englobant.

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

2. Définissez l'élément span pour qu'il s'affiche sous forme de bloc en ligne et appliquez :first-letter à it.

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

Notes

•  : la première lettre n'affecte pas les éléments précédés d'un contenu tel que des images ou des tableaux en ligne sur la même ligne.
• L'utilisation de :before before :first-letter applique le style à l'élément :before au lieu de la première lettre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!