CSS：第一个字母不工作 [英] CSS :first-letter not working
问题描述
我试图将CSS样式应用于从Microsoft Word文档生成的一些HTML片段。 Word生成的HTML是相当残酷，并且包括很多内联样式。它像这样：
I'm trying to apply CSS styles to some HTML snippets that were generated from a Microsoft Word document. The HTML that Word generated is fairly atrocious, and includes a lot of inline styles. It goes something like this:
<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 选择器，类似于：
...and very simply, I would like to style the first letter of the title section. It just needs to be larger and in a different font. To do this I am trying to use the :first-letter selector, with something kind of like:
p b span:first-letter {
font-size: 500px !important;
}
但它似乎并不工作。这里是一个小提琴演示这个：
But it doesn't seem to be working. Here's a fiddle demonstrating this:
任何想法是什么错误/如何获得标题部分的第一个字母的样式正确？
Any ideas what is wrong/how to get the first letter of the title section styled correctly? I can make minor changes to the markup (like adding a wrapper div around things), though not without some difficulty.
推荐答案
：第一个字母到 p ，而不是 span 。
p:first-letter {font-size: 500px;}
或如果您想在 span 中使用：first-letter / code>然后这样写：
or if you want a :first-letter selector in a span then write it like this:
p b span:first-letter {font-size: 500px !important;}
span {display:block}
MDN 为这种不明显的行为提供理由：
:: first-letterCSS伪元素选择块的第一行的第一个字母
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-letter 伪元素只对具有显示的元素有影响 的值， inline-block ， table-cell ， list-item 或表字幕。在所有其他情况下， :: first-letter 没有效果。
A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.
示例
- http：// jsfiddle。 net / sandeep / KvGr2 / 9 /
- http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/
- http://jsfiddle.net/sandeep/KvGr2/9/
- http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/
Examples
https：// developer .mozilla.org / zh-CN / docs / Web / CSS / ::第一封信
http://reference.sitepoint.com/css/pseudoelement-firstletter
这篇关于CSS：第一个字母不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
