::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 能有效提升文本的可读性和美观度。
