Question

我正在尝试将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;
}

但它似乎没有起作用。这是一个证明这一点的小提琴：

http://jsfiddle.net/KvGr2/

任何想法有什么不对/如何正确设置标题部分的第一个字母？我可以对标记进行微小的更改（比如在事物周围添加包装器div），但不是没有一些困难。

Answer 1

::first-letter不适用于内嵌元素，例如span。 ::first-letter适用于块元素，例如段落，表格标题，表格单元格，列表项目或display属性设置为inline-block的元素。

因此，最好将::first-letter应用于p而不是span。

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

或者如果您想要::first-letter中的span选择器，请按以下方式编写：

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

MDN provides the rationale表示这种非显而易见的行为：

::first-letter CSS伪元素选择块第一行的第一个字母，如果它前面没有任何其他内容（如图像或内联表）。

...

第一行仅在块容器框中有意义，因此::first-letter伪元素仅对display值为block的元素产生影响，{{1 }，inline-block，table-cell或list-item。在所有其他情况下，table-caption无效。

实施例

参考

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

Answer 2

您可以通过将span的display属性设置为inline-block来获得预期的行为：

＆＃13;

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

＆＃13;

<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>

＆＃13;

Answer 3

这是因为:first-letter仅对块/内联块元素进行操作。 SPAN是内联元素。

取自http://reference.sitepoint.com/css/pseudoelement-firstletter：

：first-letter伪元素主要用于创建common 印章效果，如滴帽。这个伪元素代表 a中第一个格式化文本行的第一个字符块级元素，内联块，表格标题，表格单元格，或列表项。

Answer 4

: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());
});

这是对Codepen的测试：https://codepen.io/anon/pen/KOzJLN

CSS：第一封信不起作用

4 个答案:

实施例

参考