::first-letter (:first-letter) - CSS（层叠样式表） 编辑

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

/* Selects the first letter of a <p> */
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 更受欢迎.

示例

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

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

规范

Specification	Status	Comment
CSS Pseudo-Elements Level 4 ::first-letter	Working Draft	允许属性的类型设置, 文本修适和内联布局属性, opacity 以及 box-shadow.
CSS Text Decoration Module Level 3 text-shadow with ::first-letter	Candidate Recommendation	可以对text-shadow 属性使用 ::first-letter.
Selectors Level 3 ::first-letter	Recommendation	定义列表项的特殊行为, 或者是语言特定行为 (比如荷兰的Python). 伪元素的双冒号语法已经介绍过了.
CSS Level 2 (Revision 1) ::first-letter	Recommendation	没有重大改变, 而且 CSS2 仍然使用单冒号语法.
CSS Level 1 ::first-letter	Recommendation	使用单冒号语法的初始定义.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.7 or earlier)	9.0	7.0	1.0 (85)
Old one-colon syntax (:first-letter)	1.0	1.0 (1.7 or earlier)	5.5	3.5	1.0 (85)
Support for the Dutch digraph IJ	未实现	未实现 bug 92176	未实现	未实现	未实现

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1)	未实现	?	?
Old one-colon syntax (:first-letter)	?	1.0 (1)	?	?	?
Support for the Dutch digraph IJ	?	未实现	?	?	?

参见

• ::first-line 伪元素.