当前位置：文江博客知识库简体中文文档 Web CSS first-letterW4S

::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	未实现	未实现	未实现