CSS :first-letter 不起作用

Question

CSS :first-letter 不起作用

101

我正在尝试对从 Microsoft Word 文档生成的一些 HTML 片段应用 CSS 样式。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），尽管不容易。

- aroth

3个回答

20

将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>

- Dovev Hefetz

如果我的文本以符号开头，该如何处理？<div>！会话已过期</div> - gauti

它将适用于符号和第一个字母，除非它们之间有空格。（这样做是为了使带有前导标点的“引语”和“引文”以合理的方式处理第一个字母，因为最常见的用法是首字母大写。） - Jay Irvine

9

这是因为:first-letter只能作用于块级/内联块元素，而SPAN是一个内联元素。

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

:first-letter伪元素主要用于创建常见的排版效果，例如首字母大写。该伪元素代表块级元素、内联块、表格标题、表格单元格或列表项中第一行格式化文本的第一个字符。

- Ofer Zelig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sandeep · Accepted Answer

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

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

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

如果你想在中使用::first-letter选择器，则应像这样编写：

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

MDN为这种非显然的行为提供了理由：

::first-letter CSS伪元素选择一个块的第一行的第一个字母，如果它不是在该行上的任何其他内容（如图像或内联表格）之前。

...

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

另一个奇怪的情况（除了不能用于行内项目），如果使用:before，则:first-letter将应用于before而不是实际的第一个字母，请参见codepen

示例

参考文献

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