::first-letter (Selectors) – CSS 中文开发手册
::first-letter (Selectors) - CSS 中文开发手册
::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 |
? |
? |
? |
