CSS：第一个字母不起作用

Question

I'm trying to apply CSS styles to some HTML snippets that were generated from a Microsoft Word document.我正在尝试将 CSS 样式应用于一些从 Microsoft Word 文档生成的 HTML 片段。 The HTML that Word generated is fairly atrocious, and includes a lot of inline styles. Word 生成的 HTML 相当糟糕，并且包含许多内联样式。 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>

...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:为此，我尝试使用: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:这是一个证明这一点的小提琴：

http://jsfiddle.net/KvGr2/ http://jsfiddle.net/KvGr2/

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），但并非没有一些困难。

Answer 1

::first-letter does not work on inline elements such as a span . ::first-letter不适用于内联元素，例如span 。 ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block . ::first-letter适用于块元素，例如段落、表格标题、表格单元格、列表项或其display属性设置为inline-block元素。

Therefore it's better to apply ::first-letter to a p instead of a span .因此，最好将::first-letter应用于p而不是span 。

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

or if you want a ::first-letter selector in a span then write it like this:或者如果你想要一个::first-letter选择器在一个span然后写这样：

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

MDNprovides the rationale for this non-obvious behaviour: MDN 为这种不明显的行为提供了理由：

The ::first-letter CSS 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. ::first-letter CSS 伪元素选择块的第一行的第一个字母，如果它前面没有任何其他内容（例如图像或内联表格）在其行中。

... ...

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 .第一行仅在块容器框中有意义，因此::first-letter伪元素仅对display值为block 、 inline-block 、 table-cell 、 list-item或table-caption元素有效table-caption 。 In all other cases, ::first-letter has no effect.在所有其他情况下， ::first-letter无效。

Another odd case (apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen另一个奇怪的情况（除了不处理内联项目）是，如果您使用:before :first-letter将应用于 before 而不是实际的第一个字母，请参阅codepen

Examples例子

References参考

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Answer 2

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>

Answer 3

This is because :first-letter only operates on block / inline-block elements.这是因为:first-letter只作用于块/内联块元素。 SPAN is an inline element. 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. :first-letter 伪元素主要用于创建常见的排版效果，如首字下沉。 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.此伪元素表示块级元素、内联块、表格标题、表格单元格或列表项中第一个格式化文本行的第一个字符。

Answer 4

:first-letter is 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

CSS：第一个字母不起作用

问题描述

3 个解决方案

解决方案1
210 已采纳 2011-10-03 06:43:21

Examples例子

References参考

解决方案2
17 2015-11-30 10:02:42

解决方案3
9 2011-10-03 06:47:57

解决方案4
0 2019-07-24 16:53:24

CSS：第一个字母不起作用

问题描述

3 个解决方案

解决方案1 210 已采纳 2011-10-03 06:43:21

Examples例子

References参考

解决方案2 17 2015-11-30 10:02:42

解决方案3 9 2011-10-03 06:47:57

解决方案4 0 2019-07-24 16:53:24

解决方案1
210 已采纳 2011-10-03 06:43:21

解决方案2
17 2015-11-30 10:02:42

解决方案3
9 2011-10-03 06:47:57

解决方案4
0 2019-07-24 16:53:24