::first-letter

::first-letter 伪元素将样式应用于块级元素的第一行的第一个字母，但只有当在它之前没有任何内容（例如图像或内联表）的情况下才能生效。

p::first-letter {
  color: red;
  font-size: 130%;
}

元素的第一个字母并不总是容易识别的：

在第一个字母之前或之后的标点符号包含在匹配过程中。标点符号包括在open (Ps), close (Pe), initial quote (Pi), final quote (Pf), 和其他标点符号 (Po)中定义的任何Unicode字符。

有些语言的字母总是大写，比如荷兰语中的IJ。在这些情况下，两个字母都应该与::first-letter伪元素匹配。（浏览器很少支持此功能;请参阅下面的浏览器兼容性表）。

::before伪元素的组合和content属性可能会向元素的开头注入一些文字。在这种情况下，::first-letter将匹配此生成内容的第一个字母。

只有一小部分css属性可以与::first-letter伪元素：

所有字体属性：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，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，和longhands性质

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仅当float是none）等CSS属性

CSS3引入了::first-letter符号（用两个冒号）来区分伪类和伪元素。在CSS2中引入后，浏览器也接受:first-letter。

语法

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

实例

把每一段的第一个字母设置成红色和大号字体。

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>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.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

CSS

p::first-letter {
  color: red;
  font-size: 130%;
}

结果

规范

Specification	Status	Comment
CSS Pseudo-Elements Level 4The definition of '::first-letter' in that specification.	Working Draft	Generalizes allowed properties to typesetting, text decoration, inline layout properties, opacity, and box-shadow.
CSS Text Decoration Module Level 3The definition of 'text-shadow with ::first-letter' in that specification.	Candidate Recommendation	Allows the use of text-shadow with ::first-letter.
Selectors Level 3The definition of '::first-letter' in that specification.	Recommendation	Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ).
CSS Level 2 (Revision 1)The definition of '::first-letter' in that specification.	Recommendation	No change.
CSS Level 1The definition of '::first-letter' in that specification.	Recommendation	Initial definition, using the one-colon syntax.

浏览器兼容性

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

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18