Html CSS：第一个字母不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7631722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :first-letter not working
提问by aroth
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:
我正在尝试将 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>
...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-letterselector, with something kind of like:
...很简单，我想设置标题部分的第一个字母的样式。它只需要更大并使用不同的字体。为此，我正在尝试使用:first-letter选择器，类似于：
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.
任何想法有什么问题/如何正确设置标题部分的第一个字母？我可以对标记进行细微的更改（例如在事物周围添加包装器 div），但并非没有一些困难。
回答by sandeep
::first-letterdoes not work on inlineelements such as a span. ::first-letterworks on blockelements such as a paragraph, table caption, table cell, list item, or those with their displayproperty set to inline-block.
::first-letter不适用于内联元素，例如span. ::first-letter适用于块元素，例如段落、表格标题、表格单元格、列表项或其display属性设置为 的元素inline-block。
Therefore it's better to apply ::first-letterto a pinstead of a span.
因此，最好应用于::first-letterap而不是 a span。
p::first-letter {font-size: 500px;}
or if you want a ::first-letterselector in a spanthen write it like this:
或者如果你想要一个::first-letter选择器，span然后像这样写：
p b span::first-letter {font-size: 500px !important;}
span {display:block}
MDN provides the rationalefor this non-obvious behaviour:
MDN为这种不明显的行为提供了理由：
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.
的
::first-letterCSS伪元素选择一个块的第一行的第一个字母，如果它不是通过在其线的任何其他内容（例如图像或内联表）之前。...
第一条线仅意在块容器箱，因此，
::first-letter伪元素仅具有一个上的元件效果display的值block，inline-block，table-cell，list-item或table-caption。在所有其他情况下，::first-letter没有影响。
Examples
例子
References
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letterhttp://reference.sitepoint.com/css/pseudoelement-firstletter
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter
回答by Dovev Hefetz
You can get the intended behavior by setting the span's display property to inline-block:
您可以通过将 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>回答by Ofer Zelig
This is because :first-letteronly operates on block / inline-block elements. SPANis an inline element.
这是因为:first-letter只对块/内联块元素进行操作。SPAN是一个内联元素。
Taken from http://reference.sitepoint.com/css/pseudoelement-firstletter:
取自http://reference.sitepoint.com/css/pseudoelement-firstletter：
The :first-letter pseudo-element is mainly used for creating common typographical effects like drop caps. This pseudo-element represents the first character of the first formatted line of text in a block-level element, an inline block, a table caption, a table cell, or a list item.
:first-letter 伪元素主要用于创建常见的排版效果，如首字下沉。此伪元素表示块级元素、内联块、表格标题、表格单元格或列表项中第一个格式化文本行的第一个字符。
回答by sannaghi nabil
:first-letteris not working with display: flex, I have tried a solution with JavaScrpt:
:first-letter不工作display: flex，我已经尝试过使用 JavaScrpt 的解决方案：
$(".text").each(function(){
var txt = $(this).text().replace(/\s+/g,' ').trim() ;
$(this).text(txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
});
This is the test on codepen: https://codepen.io/anon/pen/KOzJLN
这是在codepen上的测试：https://codepen.io/anon/pen/KOzJLN
