为什么我的 CSS ::first-letter 不能处理 Word 生成的 HTML 中的内联元素？

CSS ::first-letter 不起作用

尝试将 CSS 样式应用于 Microsoft Word 生成的 HTML 文档中的内联元素时，您可能会遇到 ::first-letter 选择器的问题。此选择器旨在定位块元素（例如段落和表格单元格）的首字母，而不是诸如 Span 之类的内联元素。

要克服此限制，可以：

• 将 ::first-letter 应用于块元素：

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

• 将内联元素显示设置为阻止：

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

记住， ::first-letter 不会影响内联元素，除非它们的显示属性设置为 block 或内联块。此行为源于以下事实：::first-letter 对可以定义第一行的块元素进行操作。

其他注意事项：

• 避免将内容放在第一个字母之前，因为它可能会干扰 ::first-letter 样式。
• 如果您使用 :before 与::first-letter，它将设置 :before 内容的样式，而不是实际的第一个字母。

示例：

• [Working Fiddle with堵塞样式](http://jsfiddle.net/sandeep/KvGr2/9/)
• [内联块示例](http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/)

参考文献：

• [MDN 文档::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)
• [CSS 伪元素 :first-letter 的 SitePoint 参考] (http://reference.sitepoint.com/css/pseudoelement-firstletter)

以上是为什么我的 CSS ::first-letter 不能处理 Word 生成的 HTML 中的内联元素？的详细内容。更多信息请关注PHP中文网其他相关文章！