此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
::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 2015年7月.
* Some parts of this feature may have varying levels of support.
::first-letter CSS 伪元素将样式应用于区块容器第一行的第一个字母,但仅当其前面没有其他内容(例如图像或行内表格)时才有效。
尝试一下
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>
Scientists exploring the depths of Monterey Bay unexpectedly encountered a
rare and unique species of dragonfish. This species is the rarest of its
species.
</p>
<p>
When Robison and a team of researchers discovered this fish, they were aboard
a week-long expedition.
</p>
元素的第一个字母并不总是容易识别:
允许的属性
只有一小部分 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,以及详细属性 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 属性
语法
css
::first-letter {
/* ... */
}
示例
简单的下沉式首字母
在此示例中,我们将使用 ::first-letter 伪元素在紧接 <h2> 后的段落的首字母上创建一个简单的下沉式首字母效果。
HTML
html
<h2>我的标题</h2>
<p>
人的心只容得下一定程度的绝望,海绵已经吸够了水,即使大海从它上面流过,也不能再给它增添一滴水了。文学就像炉中的火一样,我们从人家借得火来,把自己点燃,而后传给别人,以致为大家所共同拥有。魂牵梦萦在江南,有一片土地,名唤故乡;对酒当歌在烟雨,有一份情愫,称作痴迷。
</p>
<p>世界上最宽阔的是海洋,比海洋更宽阔的是天空,比天空更宽阔的是人的心灵。</p>
CSS
css
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
结果
[フレーム]
对特殊标点符号和非拉丁字符的影响
此示例说明了 ::first-letter 对特殊标点符号和非拉丁字符的影响。
HTML
html
<p>一些段落,一些段落,一些段落,一些段落。</p>
<p>-特殊标点符号的开头。</p>
<p>_特殊标点符号的开头。</p>
<p>"特殊标点符号的开头。</p>
<p>'特殊标点符号的开头。</p>
<p>*特殊标点符号的开头。</p>
<p>#特殊标点符号的开头。</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>
CSS
css
p::first-letter {
color: red;
font-size: 150%;
}
结果
[フレーム]
为 SVG 文本元素中的第一个字母设置样式
在此示例中,我们使用 ::first-letter 伪元素来设置 SVG <text> 元素中第一个字母的样式。
备注: 在撰写本文时,此功能已获得有限支持。
HTML
html
<svg viewBox="0 0 300 40">
<text y="30"><text> SVG 中的首个字母</text>
</svg>
CSS
css
text {
font-family: sans-serif;
}
text::first-letter {
font-family: serif;
font-size: 2rem;
font-weight: 600;
fill: tomato;
stroke: indigo;
}
结果
[フレーム]
规范
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |
浏览器兼容性
Loading...