:first-letter伪元素用于为块级元素首字母设置样式，实现首字下沉等排版效果。通过font-size、float、margin等属性可控制首字母大小、浮动与间距，常用于p或div等元素。需注意仅块级元素生效，内联元素需更改display类型；忽略空白与标点，以实际文本首字母为准；支持字体、颜色、背景等属性，但display与position在旧浏览器受限；若存在::before内容，则以其为首字符。现代浏览器兼容性良好，建议结合类名使用避免全局影响，提升文本视觉层次。
使用 CSS 的 :first-letter 伪元素可以轻松为段落或块级元素中的首字母添加特殊样式，常用于实现“首字下沉”等排版效果。这个伪元素会选中块级元素中第一行文本的第一个字母，并允许你单独设置其样式。
基本语法与用法
:first-letter 只能应用于块级元素（如 p、div、h1 等），不能用于内联元素（如 span，默认情况下）。要让它生效，目标元素的 display 属性需为 block、inline-block、table-cell 等支持伪元素的类型。
示例：p:first-letter {
font-size: 2em;
color: red;
font-weight: bold;
}
上面代码会让每个 p 段落的首字母变大、变红并加粗。
实现首字下沉效果
这是 :first-letter 最常见的用途之一，常见于文章开头的排版设计。
p.intro:first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin: 0.1em 0.1em 0 0;
padding: 2px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
通过 float: left 让首字母左浮动，其他文字环绕它，形成典型的“首字下沉”效果。你可以调整 margin 和 padding 来控制间距。
注意事项与限制
- 只对块级元素有效。如果在 span 上使用，需设置 display: block 或类似值。
- 仅作用于实际文本的第一个字母，忽略前面的空白或标点符号。例如，“(Hello)” 的 :first-letter 会选中 “H”。
- 支持大多数文本相关属性：字体、颜色、背景、大小、行高、边距等。但不支持所有 CSS 属性，如 display 和 position 在某些旧浏览器中可能受限。
- 若元素内有 ::before 伪元素插入内容，:first-letter 会以插入的内容为首字符进行匹配。
兼容性与实际建议
:first-letter 在现代浏览器中支持良好，包括 Chrome、Firefox、Safari、Edge 等。但在极低版本的 IE 中可能存在兼容问题，一般无需特别处理。
建议在实际项目中结合类名使用，避免全局影响。例如专门给文章段落加上 .article p:first-letter 来精准控制样式。
基本上就这些。掌握这个伪元素后，可以快速提升文本排版的视觉层次感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
