::first-letter

::first-letter 是一个伪元素，它允许您对元素中的第一个字母进行样式设置，而无需在 HTML 中将第一个字母周围添加 <span> 标签。虽然没有将标签添加到 DOM，但它就像目标的第一个字母被包含在一个 标签中一样。您可以像使用真实元素一样，使用以下方法对第一个字母进行样式设置：

p::first-letter {
  font-weight: bold;
  color: red;
}

<p>The first letter is bold and red</p>

结果就像您在第一个字母周围添加了一个假元素一样

<!-- Just an example, does not work! -->
<p>
  <firstletter>T</firstletter>he first letter is bold and red.
</p>

The first letter is bold and red

• 此伪元素仅在父元素是块级容器框时才有效（换句话说，它不适用于 display: inline; 元素的第一个字母）。
• 如果元素上同时具有 ::first-letter 和 ::first-line，则第一个字母将继承自第一行样式，但 ::first-letter 上的样式在样式冲突时会覆盖。
• 如果您使用 ::before 生成内容，则第一个字母或标点符号字符（无论它是原始文本节点的一部分还是通过生成的内容创建的），都将是目标。

更多信息

• 在用于首字母下降时，与 p:first-of-type 结合使用，这样不会对每个第一个字母进行样式设置。
• 示例 Pen - 带有生成的内容
• W3C 维基
• W3C CSS3 选择器模块

浏览器支持

注意：对于 Internet Explorer 8 及更低版本，请使用单个冒号 :first-letter 而不是双冒号表示法。