css伪元素::first-letter首字母样式

::first-letter 伪元素用于设置块级元素首个字母的样式，常用于首字下沉或强调段落开头。通过 p::first-letter 可定义字体、颜色、大小等，支持 font-size、color、line-height 等文本属性，需注意仅对块级元素生效，且自动包含前导标点符号。

在CSS中，::first-letter 伪元素用于选中块级元素（或某些内联元素）中的第一个字母，并为其单独设置样式。这个特性常用于实现“首字下沉”或突出段落开头的视觉效果。

基本语法

p::first-letter { font-size: 2em; color: red; }

这段代码会让每个 p 段落的第一个字母字号放大为原来的2倍，并变成红色。

常见应用场景

::first-letter 特别适合以下几种设计需求：

• 首字下沉：模仿传统印刷排版，让段落首个字母变大并下沉几行
• 强调开头：用不同颜色、字体或背景突出段落起始
• 装饰性文本：配合字体、阴影等属性打造艺术化首字母

使用注意事项

虽然功能强大，但使用时需注意以下几点：

• 仅对块级元素生效（如 p、div、h1 等），若元素 display 为 inline，则不会起作用
• 会自动识别连续的标点符号（如引号、括号）并包含在“首字母”范围内
• 支持大部分文本相关属性，如 font-size、color、text-transform、line-height 等
• 不支持所有CSS属性，例如不能设置 margin 或 padding（部分浏览器可能支持）

实际例子：首字下沉效果

p::first-letter { font-size: 3em; float: left; line-height: 0.8; margin-right: 0.1em; color: #d40000; }

这样设置后，首字母会显著放大并向左浮动，形成经典的首字下沉排版效果，适用于文章正文的开篇段落。

基本上就这些，合理使用 ::first-letter 能有效提升文本的可读性和美观度。