:first-letter 和 :first-line 伪类可分别对段落首字母和首行设置样式，实现首字下沉、首行加粗等排版效果。前者常用于放大首字母并浮动布局，营造印刷美感；后者用于定义首行字体、颜色或字重，提升可读性。两者均需应用于块级元素，推荐使用双冒号语法，且注意特殊字符可能影响首字母识别，主流浏览器支持良好。
在网页设计中，使用CSS伪类选择器可以为文本内容增添独特的视觉效果。其中 :first-letter 和 :first-line 是两个非常实用的伪类，专门用于对段落的首字母和首行进行样式控制。合理运用它们，能显著提升排版美感，尤其适合文章类页面的美化。
使用 :first-letter 突出首字母
:first-letter 伪类用于选中块级元素中第一行文本的第一个字母，并对其单独设置样式。常用于实现“首字下沉”或“大写强调”的效果。
常见应用场景：- 文章开头的首字母放大并下沉两行，营造传统印刷风格
- 将首字母设置不同颜色或字体，增强视觉吸引力
- 配合字体图标或背景装饰，打造个性化排版
示例代码：
p::first-letter {
font-size: 2.5em;
float: left;
line-height: 0.8;
margin-right: 6px;
color: #d44d24;
font-weight: bold;
}
这段样式会让每个段落的首字母变大并向左浮动，形成经典的首字下沉效果。
立即学习“前端免费学习笔记（深入）”；
使用 :first-line 控制首行样式
:first-line 伪类用于设置块级元素中第一行文本的样式。它只作用于当前显示的第一行，即使文本换行，也仅影响最初可见的那一行。
典型用途包括：- 为段落首行设置不同的字体、颜色或字重
- 调整首行的文本样式以匹配整体设计风格
- 在响应式布局中动态控制首行外观
示例代码：
p::first-line {
font-weight: bold;
color: #2c3e50;
font-variant: small-caps;
}
这样设置后，每个段落的第一行文字会以小型大写字母呈现，并加粗显示，使内容更具可读性和层次感。
注意事项与兼容性
虽然这两个伪类功能强大，但在使用时需注意以下几点：
- 必须应用于块级元素（如 p、div、h1-h6），内联元素不支持
- 建议使用双冒号 ::first-letter 和 ::first-line 语法，以区分伪类和伪元素
- 某些复杂字符（如引号前导）可能影响首字母识别，可通过添加空格或调整HTML结构解决
- 主流浏览器均支持，但在老旧版本IE中可能存在渲染差异
