::first-letter 伪元素用于选中块级元素第一行的首字母,实现首字放大或下沉效果;2. 使用 font-size、line-height、float 等属性可增强视觉表现;3. 可设置颜色、字体、加粗等样式提升装饰性;4. 仅对块级元素生效,首字符不应被内联标签包裹,且不支持所有CSS属性。

在CSS中,:first-letter 伪元素用于选中块级元素中第一行的第一个字母,并对其单独设置样式。这个选择器常用于实现“首字放大”效果(也叫“首字下沉”),常见于文章排版或杂志风格设计。
基本语法
使用 :first-letter 的方式如下:p::first-letter {
font-size: 2em;
color: red;
}
注意:现代标准推荐使用双冒号 :: 来表示伪元素,以区别于伪类(如 :hover)。
实现首字母放大
通过增大字体大小和调整行高,可以让首字母更突出:p::first-letter {
font-size: 2.5em;
line-height: 1;
float: left;
margin-right: 0.1em;
}
使用 float: left 可以让放大的首字母与后续文字自然对齐,形成经典的“首字下沉”布局。
设置首字母颜色或其它样式
除了放大,你还可以更改颜色、字体、加粗等:article p::first-letter {
color: #d63384;
font-weight: bold;
font-family: "Georgia", serif;
text-transform: uppercase;
}
立即学习“前端免费学习笔记(深入)”;
这会让首字母更具装饰性,适用于标题段落或引言部分。注意事项
使用 :first-letter 时需注意以下几点:- 只对块级元素生效(如 p、div、h1-h6),对 inline 元素无效
- 如果第一个字符被其他内联元素(如 )包裹,可能无法正确选取
- 支持大多数文本相关属性:color、font、text-transform 等,但不支持所有 CSS 属性
- 可与 ::before 生成内容结合使用,但行为可能受浏览器影响
基本上就这些。合理使用 ::first-letter 能提升页面的视觉层次,让文本更有阅读美感。不复杂但容易忽略细节。










