Pourquoi mon CSS ::first-letter ne fonctionne-t-il pas sur les éléments en ligne dans le HTML généré par Word ?

CSS ::first-letter ne fonctionne pas

Lorsque vous essayez d'appliquer des styles CSS à des éléments en ligne dans un document HTML généré par Microsoft Word, vous pouvez rencontrer des problèmes avec le sélecteur ::first-letter. Ce sélecteur est conçu pour cibler la première lettre des éléments de bloc tels que les paragraphes et les cellules de tableau, et non les éléments en ligne comme les spans.

Pour surmonter cette limitation, soit :

• Appliquer ::première lettre à un bloc Élément :

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

• Définir l'affichage des éléments en ligne sur bloquer :

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

N'oubliez pas, ::first-letter n'affectera pas les éléments en ligne à moins que leur propriété d'affichage soit définie sur block ou inline-block. Ce comportement vient du fait que ::first-letter opère sur des éléments de bloc au sein desquels une première ligne peut être définie.

Considérations supplémentaires :

• Éviter placer le contenu avant la première lettre, car cela pourrait interférer avec le style ::first-letter.
• Si vous utilisez :before avec ::first-letter, il stylisera le contenu :before, pas la première lettre réelle.

Exemples :

• [Travailler avec Fiddle avec Style de bloc](http://jsfiddle.net/sandeep/KvGr2/9/)
• [Inline-Block Exemple](http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/)

Références :

• [Documentation MDN sur ::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)
• [Référence SitePoint sur le pseudo-élément CSS :first-letter] (http://reference.sitepoint.com/css/pseudoelement-firstletter)

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!