使用::first-letter可实现段落首字母装饰，1. 选中块级元素首个字母，设置颜色、大小、加粗；2. 通过font-size、font-family、float等属性实现首字下沉；3. 注意仅适用于块级元素，中文首字有效，主流浏览器均支持。
要实现段落首字母的装饰效果，可以使用CSS中的::first-letter伪元素选择器。它专门用于选中块级元素中第一个字母，并对其单独设置样式，比如颜色、字体大小、字体族等，常用于模拟“首字下沉”或突出显示的效果。
1. 使用 ::first-letter 选择首字母
::first-letter 只作用于块级元素（如 p、div）的第一个可见字母。注意：标点符号和空格不会被包含在内，真正的字母才会被选中。
p::first-letter {
font-size: 2em;
color: red;
font-weight: bold;
}
上面的代码会让每个段落的第一个字母字号放大为原来的2倍，颜色变为红色，并加粗显示。
2. 设置更丰富的装饰效果
你可以进一步增强视觉效果，比如让首字母更大、改变字体、添加边距或背景色：
立即学习“前端免费学习笔记（深入）”；
p::first-letter {
font-size: 3em;
color: #d63384;
font-family: 'Georgia', serif;
float: left;
line-height: 0.8;
margin-right: 5px;
}
这里通过 float: left 实现“首字下沉”布局，让大写的首字母与后续文字自然对齐。line-height 调整行高避免与正文重叠，margin-right 提供右侧间距。
3. 注意事项和兼容性
- ::first-letter 只能应用于支持伪元素的块级容器，不能用于内联元素（如 span）
- 如果段落以数字或特殊字符开头，仍会尝试选取第一个字母（例如 “Hello” 中的 H）
- 中文环境下，首个汉字也会被正确识别并应用样式
- 主流浏览器（Chrome, Firefox, Safari, Edge）均支持 ::first-letter
基本上就这些。通过组合 color 和 font-size 属性，配合布局技巧，就能轻松实现美观的段落首字母装饰效果。不复杂但容易忽略细节。
