CSS ::first-letter伪元素用于选择一段文字中第一行文字的第一个字母，它要求文字所在的行之前没有其它内容（如图片和内联表格等）。
::first-letter伪元素不会选择内联元素的第一个字母。也就是说，::first-letter属性对于display: inline的元素无效，它只对display属性为block、inline-block、table-cell、table-caption或list-item的元素有效。
如果你使用::before伪元素为一段文字添加了一些虚拟的文本内容，那么::first-letter的目标字母将会是::before伪元素插入的虚拟文本的第一个字母。例如你在<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属性，它们是：
- 字体属性：font、font-style、font-variant、font-weight、font-size、line-height和font-family
- text-decoration、text-transform、letter-spacing、word-spacing、float、vertical-align（仅当
float为none时）和color - 外边距属性：margin、margin-top、margin-right、margin-bottom和margin-left。
- 内边距属性：padding、padding-top、padding-right、padding-bottom和padding-left。
- 边框属性：border、border-width、border-style和border-color，以及这些属性对于的各自的具体属性。
- 背景属性：background、background-color、background-image、background-position、background-repeat、background-size和background-attachment。
关于:和::的区别
在别人书写的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;
}
在线演示
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. "
浏览器支持
支持双冒号语法的::first-letter伪元素的浏览器有：Chrome, Firefox, Safari, Opera, Internet Explorer 9+ 以及 Android 和 iOS。
IE8浏览器不支持双冒号的语法，仅支持单冒号的:first-letter语法。
