::first-letter (:first-letter)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
概要
::first-letter
CSS 虛擬元素選取了一個區塊第一行的第一個字母,如果那一行前面沒有其他內容(例如圖片或是行內表格)。
The first letter of an element is not necessarily trivial to identify:
- Punctuation, that is any characters defined in Unicode in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf) and other punctuation (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.
- Similarly some languages have digraphs that are always capitalized together, like the
IJ
in Dutch. In these rare cases, both letters of the digraph should be matched by the::first-letter
pseudo-element. (This is poorly supported by browsers, check the browser compatibility table). - Finally, a combination of the
::before
pseudo-element and thecontent
property may inject some text at the beginning of the element. In that case,::first-letter
will match the first letter of this generated content.
A first line has meaning only in a block-container box, therefore the ::first-letter
pseudo-element has an effect only on elements with a display
value of block
, inline-block
, table-cell
, list-item
or table-caption
. In all other cases, ::first-letter
has no effect.
Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter
pseudo-element:
- All font properties :
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
andfont-family
. - All background properties :
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
. - All margin properties:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
. - All padding properties:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
. - All border properties: the shorthands
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, and the longhands properties. - The
color
property. - The
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
(when appropriate),line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
(only iffloat
isnone
) CSS properties.
As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.
备注:
In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.If legacy browsers must be supported, :first-letter
is the only viable choice; if not, ::first-letter
is preferred.
Example
Make the first letter of every paragraph red and big.
HTML Content
<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. Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.
</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, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
</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 Content
p::first-letter {
/* Use :first-letter if support for IE 8 or earlier is needed */
color: red;
font-size: 130%;
}
Output
規範
Specification |
---|
CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |
瀏覽器相容性
BCD tables only load in the browser
參見
::first-line
虛擬元素。