使用::first-letter可选中块级元素首字母并设置样式，如字体、颜色、大小等，常用于文章开头装饰。示例中通过font-size、font-weight和color改变首字母外观，还可结合float实现首字下沉，提升视觉层次。应用场景包括段落、引用或章节开头，增强可读性与设计感。需注意元素为块级且首字符未被内联标签包裹，避免识别失败，同时关注多语言符号兼容性及旧版IE支持问题。
要使用CSS的::first-letter伪元素实现首字母大写效果，关键是选中段落或文本块的第一个字母，并为其单独设置样式。这个方法常用于文章开头的装饰性排版。
基本语法与用法
::first-letter作用于块级元素的第一个字母（包括引号等标点前缀），可以修改其字体、颜色、大小等样式。
示例：
立即学习“前端免费学习笔记（深入）”；
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #d63384;
}
这样会使每个 <p> 段落的第一个字母变大、加粗并着色。
常见应用场景
这种效果适合用于文章段落、引用或章节开头，增强可读性和视觉吸引力。
- 配合浮动让首字母占据多行空间，模拟传统印刷风格
- 添加边距或背景提升设计感
- 与字体搭配使用，突出内容层级
进阶示例：仿古书籍首字下沉
p::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 0.1em;
padding-top: 0.1em;
}
通过float: left和调整间距，使大写字母“嵌入”文本左侧，形成经典排版效果。
注意事项
使用时需注意以下几点以避免样式失效：
- 元素必须是块级容器（如 div、p）才能正确触发 ::first-letter
- 首字符不能被其他内联元素包裹（比如 span），否则可能无法选中
- 某些语言或符号组合（如带重音符号的字母）也可能影响识别
- 浏览器对 ::first-letter 支持良好，但老版本IE可能存在兼容问题
