CSS：第一个字母不起作用答案

【问题标题】：CSS :first-letter not workingCSS：第一个字母不起作用
【发布时间】：2011-11-29 17:03:10
【问题描述】：

我正在尝试将 CSS 样式应用于从 Microsoft Word 文档生成的一些 HTML sn-ps。 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），但并非没有一些困难。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

或者如果你想在span 中使用::first-letter 选择器，那么可以这样写：

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

MDN provides the rationale 对于这种不明显的行为：

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

...

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

另一个奇怪的情况（除了不处理内联项目）是，如果您使用:before，:first-letter 将适用于之前而不是实际的第一个字母，请参阅codepen

示例

参考文献

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

【讨论】：

谢谢。我注意到一件奇怪的事情 - % 符号也被调整大小？ jsfiddle.net/iamkeir/KvGr2/76
+1 感谢您让我免于烦恼。我不得不认为想要使用 span 元素是很常见的，所以我很惊讶它不起作用。

【解决方案2】：

这是因为:first-letter 只对块/内联块元素起作用。 SPAN 是一个内联元素。

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

:first-letter 伪元素主要用于创建常见的印刷效果，如首字下沉。这个伪元素代表 a 中第一个格式化文本行的第一个字符块级元素、内联块、表格标题、表格单元格、或列表项。

【讨论】：

【解决方案3】：

您可以通过将 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>

【讨论】：

如果我的文字以符号开头怎么办。
！会话过期