:first-letter 选择器用于样式化一个块级元素的第一个字母。它是一个伪类选择器，专门针对文本元素，如 <p>、<h1> 和 <span>。

语法

:first-letter {
  /* 样式规则 */
}

用法

:first-letter 选择器可以应用于任何块级元素，以样式化其第一个字母。以下是一些示例：

<h1>这个标题的第一个字母将被样式化</h1>
<p>这个段落的第一个字母将被样式化</p>
<span>这个跨度的第一个字母将被样式化</span>

:first-letter {
  color: red;
  font-size: 1.5rem;
  font-weight: bold;
}

属性

:first-letter 选择器支持以下属性：

• color：设置第一个字母的颜色。
• font-family：设置第一个字母的字体系列。
• font-size：设置第一个字母的大小。
• font-style：设置第一个字母的样式（正常、斜体或斜体）。
• font-weight：设置第一个字母的粗细。
• line-height：设置第一个字母的行高。
• text-decoration：设置第一个字母的文本装饰（下划线、删除线或无）。
• text-transform：设置第一个字母的大小写转换（大写、小写或大写）。

示例

以下是一些使用 :first-letter 选择器的示例：

红色大写加粗第一个字母：

<h1>这个标题的第一个字母将被样式化</h1>

:first-letter {
  color: red;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

蓝色斜体大写第一个字母：

<p>这个段落的第一个字母将被样式化</p>

:first-letter {
  color: blue;
  font-style: italic;
  font-size: 1.2rem;
  text-transform: uppercase;
}

绿色下划线大写第一个字母：

<span>这个跨度的第一个字母将被样式化</span>

:first-letter {
  color: green;
  text-decoration: underline;
  font-size: 1.3rem;
  text-transform: uppercase;
}

注意

:first-letter 选择器仅适用于块级元素。对于内联元素，可以使用 :first-child 选择器来样式化第一个字符。

此外，:first-letter 选择器将不适用于以下情况：

• 元素的第一个字符不是字母。
• 元素的第一个字母是一个空格字符。
• 元素的第一个字母是一个换行符。
• 元素的第一个字母是不可见的（例如，一个空的文本节点）。