CSS：第一个字母不工作
我正在尝试将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> …很简单，我想要devise标题部分的第一个字母。 它只需要更大，并在不同的字体。 要做到这一点，我正在尝试使用:first-letterselect器，类似于：
pb span:first-letter { font-size: 500px !important; }
但它似乎并没有工作。 这是一个小提琴演示：
http://jsfiddle.net/KvGr2/
任何想法什么是错的/如何得到正确的标题部分的第一个字母？ 我可以对标记进行细微的修改（就像在事物周围添加一个包装div一样），虽然不是没有一些困难。
:first-letter不适用于内联元素，如span 。 :first-letter适用于块元素，如段落，表格标题，表格单元格，列表项目或其display属性设置为inline-block 块的元素。
因此，最好将:first-letter应用于p而不是span 。
p:first-letter {font-size: 500px;}
或者如果你想在一个span :first-letterselect器，然后像这样写：
pb span:first-letter {font-size: 500px !important;} span {display:block}
MDN为这种不明显的行为提供了理由 ：
::first-letterCSS伪元素select块的第一行的第一个字母，如果它没有在其行上的任何其他内容（例如图像或行内表格）之前。…
第一行仅在块容器框中有含义，因此
::first-letter伪元素仅对具有display值block，inline-block，table-cell，list-item或table-caption。 在所有其他情况下，::first-letter不起作用。
例子
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter
您可以通过将span的display属性设置为inline-block来获得预期的行为：
.heading span { display: inline-block; } .heading span:first-letter { color: red; }
<div class="heading"> <span>An</span> <span>Interesting</span> <span>Heading</span> </div>
这是因为:first-letter仅对块/行内块元素进行操作。 SPAN是一个内联元素。
取自http://reference.sitepoint.com/css/pseudoelement-firstletter ：
第一个字母的伪元素主要用于创build常见的印刷效果，如下降帽。 此伪元素表示块级元素，内联块，表标题，表格单元或列表项中文本的第一个格式化行的第一个字符。
