我正在尝试将 CSS 样式应用到一些从 Microsoft Word 文档生成的 HTML 片段。 Word 生成的 HTML 相当糟糕，并且包含许多内联样式。它是这样的:
<html>
<head></head>
<body>
<center>
<p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>
<p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
</body>
</html>
...非常简单，我想为标题部分的第一个字母设置样式。它只需要更大并且使用不同的字体。为此，我尝试使用 :first-letter 选择器，类似于:
p b span:first-letter {
font-size: 500px !important;
}
但是好像不行。这是一个证明这一点的 fiddle :
任何想法有什么问题/如何正确设置标题部分的第一个字母的样式？我可以对标记进行微小的更改(例如在事物周围添加包装器 div)，但并非没有困难。
最佳答案
::first-letter 不适用于 inline 元素，例如 span。 ::first-letter 适用于 block 元素，例如段落、表格标题、表格单元格、列表项或具有 display 属性的元素设置为 inline-block。
因此，最好将 ::first-letter 应用于 p 而不是 span。
p::first-letter {font-size: 500px;}
或者如果你想在 span 中使用 ::first-letter 选择器，那么这样写:
p b span::first-letter {font-size: 500px !important;}
span {display:block}
MDN provides the rationale对于这种不明显的行为:
The
::first-letterCSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line....
A first line has only meaning in a block-container box, therefore the
::first-letterpseudo-element has only an effect on elements with adisplayvalue ofblock,inline-block,table-cell,list-itemortable-caption. In all other cases,::first-letterhas no effect.
另一个奇怪的情况(除了不处理内嵌项)是如果你使用 :before :first-letter 将适用于前面不是实际的第一个字母，请参阅 codepen
例子
引用资料
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter
关于html - CSS :first-letter not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7631722/