::first-letter

::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%;
}

结果

规范

浏览器兼容性