::first-letter

版本：CSS3

CSS 伪元素::first-letter会选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。

语法:

E::first-letter{sRules}

::first-letter选择器用来指定元素第一个字母的样式，它生成包含元素的第一个字母的伪元素。
::first-letter应用的元素包括块，列表项，表调用，表标题和内联块元素。可以应用到首字母的属性是有限的。
::first-letter是CSS3新版的写法，以前的写法是:first-letter仍然有效。新版是双冒号::，旧版是单个冒号:

/* Selects the first letter of a  */
p::first-letter {
  font-size: 130%;
}

元素首字符并不总是很容易识别:

首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何Unicode字符以及其他种类的标点符号（Po）。
另外还会有一些以大写双字母组合命名的语言，比如荷兰的 IJ .在这种罕见情况下，两个大写字母都理应被::first-letter伪元素匹配到.(但是浏览器对此支持得很糟糕，可以用 browser compatibility table进行核实).
::before伪元素和content属性结合起来有可能会在元素前面注入一些文本。如此，::first-letter将会匹配到content文本的首字母。

首行只在 block-container box内部才有意义，因此::first-letter伪元素只在display属性值为block,inline-block,table-cell,list-item或者table-caption的元素上才起作用。其他情况下,::first-letter毫无意义.

允许的属性值

只有一小部分CSS可以在包含使用了::first-letter伪元素选择器的CSS规则集声明块内运用:

所有的字体属性:font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font-synthesis,font-variant,font-variant-alternates,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-weight,font-size,font-size-adjust,line-height以及font-family.
所有的背景属性:background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachment以及background-blend-mode.
所有的外边距属性:margin,margin-top,margin-right,margin-bottom,margin-left.
所有的内边距属性:padding,padding-top,padding-right,padding-bottom,padding-left.
所有的边框属性：比如一些简短的边框属性border,border-style,border-color,border-width,border-radius,border-image,还剩下许多冗长的边框属性等等.
color属性.
text-decoration,text-shadow,text-transform,letter-spacing,word-spacing(使用恰当的话),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align（注意此刻必须没有浮动等属性）.

当这个列表以后被实现时，为了保持css不过时。建议你不要在声明块内使用任何其他属性.

对于 CSS 2,伪元素采用单冒号前缀语法。因为伪类也是同样的语法，所以使得两者难以区分. CSS2.1 改变了伪元素的前缀语法可以解决这个问题。现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀.
CSS2伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法.
考虑浏览器兼容性的话,:first-letter是一个更有效的选择；否则,::first-letter更受欢迎

浏览器支持


IE9+以及新版浏览器都支持`::first-letter`

例子

/* 使每段开头的第一个字母变红变大 */

p::first-letter {  /* 使用:first来兼容ie8- */
  color: red; 
  font-size: 130%; 
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p:first-letter{
				font-size:200%;
				color:#8a2be2;
			}
		</style>
	</head>
	<body>
	<div>
		<h1>hello world!</h1>
		<p>php</p>
		<p>html</p>
		<p>css</p>
	</div>
	</body>
</html>

hello world!

php

html

css