CSS ::first-letter伪元素用于选择一段文字中第一行文字的第一个字母，它要求文字所在的行之前没有其它内容（如图片和内联表格等）。

::first-letter伪元素不会选择内联元素的第一个字母。也就是说，::first-letter属性对于: inline的元素无效，它只对属性为block、inline-block、table-cell、table-caption或list-item的元素有效。

如果你使用伪元素为一段文字添加了一些虚拟的文本内容，那么::first-letter的目标字母将会是伪元素插入的虚拟文本的第一个字母。例如你在<p>段落添加了下面的CSS代码：

p:before {
    content: "This is: ";
}

那么::first-letter选择的是content中的第一个字母T，而不是段落本身的第一个字母。

如果文本的第一个字母是数字，::first-letter属性也会选择这个数字，例如“25days”，会选择数字“2”。

考虑以下的一段文本，如果在文本之前使用了<br>换行符，那么::first-letter将不会选择任何东西。

<p><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

Unicode编码中定义的标点符号以及其他种类的标点符号，如果是位于第一个字母之前，也会被::first-letter匹配。例如下面的例子：

<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit..."</p>

对上面的段落使用::first-letter伪元素，将第一个字母的字体大小设置为3em，得到如下图的效果：

可以用来修饰 ::first-letter 的CSS属性

只有一部分的CSS属性可以用来修饰::first-letter属性，它们是：

• 字体属性：、、、、、和
• 、、、、、（仅当float为none时）和
• 外边距属性：、、、和。
• 内边距属性：、、、和。
• 边框属性：、、和，以及这些属性对于的各自的具体属性。
• 背景属性：、、、、、和。

关于:和::的区别

在别人书写的CSS代码中，你可能经常看到有人使用:first-letter作为伪元素，而有一些人则使用::first-letter作为伪元素。它们之间有什么区别呢？

在CSS1和CSS2规范中，伪元素通过一个冒号:来定义，例如:hover。在CSS3规范中，使用双冒号::语法来表示伪元素（pseudo-elements），以区别于伪类（pseudo-classes）。

/* 旧的CSS2语法 */
.element:first-letter {
    /*  */
}

/* 新的CSS3语法 */
.element::first-letter {
    /*  */
}

只要是支持双冒号语法的浏览器都支持单冒号语法。IE8不支持双冒号语法，如果你要支持IE8浏览器，建议使用单冒号语法。

示例代码

下面的代码为段落的第一个字母设置一些样式。

p::first-letter {
  font-family: "Crimson Text";
  font-size:3em;
  color:red;
}

在线演示

浏览器支持

支持双冒号语法的::first-letter伪元素的浏览器有：Chrome, Firefox, Safari, Opera, Internet Explorer 9+ 以及 Android 和 iOS。

IE8浏览器不支持双冒号的语法，仅支持单冒号的:first-letter语法。