::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.

* 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>

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

第一个字母之前或紧随其后的标点符号也包含在匹配中。标点符号包括在 Unicode 中定义的开始括号（Ps）、结束括号（Pe）、起始引号（Pi）、结束引号（pf）和其他标点符号（po）类别的任何字符。
有些语言的数字符总是一起大写，如荷兰语中的 IJ。在这种情况下，数字的两个字母都应与 ::first-letter 伪元素匹配。
::before 伪元素和 content 属性的组合可能会在元素开头注入一些文本。在这种情况下，::first-letter 将匹配生成内容的第一个字母。

备注： CSS 引入了 ::first-letter 符号（带两个冒号），以区分伪类和伪元素。为了向后兼容，浏览器也接受早先引入的 :first-letter。

浏览器对荷兰语中 IJ 等数字字符的支持较差。请查看下面的兼容性表，以了解当前的支持情况。

允许的属性

只有一小部分 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">&lt;text&gt; 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

浏览器兼容性

参见

::first-line