::first-letter伪元素可实现段落首字放大、变色、浮动等效果，需作用于块级元素且首字符为字母或汉字，注意兼容性（双冒号优先，旧版IE用单冒号）及排版细节如margin-right、line-height设置。
用 ::first-letter 伪元素可以轻松实现段落首字放大、变色、浮动等效果，关键在于正确设置样式并注意兼容性和文本结构限制。
基础写法与常用样式
直接在段落选择器后添加 ::first-letter，设置字体大小、颜色、行高、浮动等属性：
-
字号放大：设
font-size: 2.5em或具体像素值（如36px） -
颜色/字体加粗：配合
color: #c00、font-weight: bold -
文字浮动：加
float: left可让大字左浮，后续文字环绕（需注意清除浮动或设置line-height避免重叠）
必须注意的限制条件
::first-letter 只对块级元素（如 p、div）生效，且仅作用于段首第一个字母或汉字（不包括标点、空格、换行符）。以下情况会失效：
- 段落开头是标点（如“，”、“《”、“（”），伪元素不触发
- 首字符被
或其他内联标签包裹，需确保纯文本开头 - 使用了
display: inline的段落，需先设为block或保持默认
增强兼容性与细节优化
部分老浏览器（如 IE9 以下）只支持单冒号 :first-letter，建议同时写双版本（现代写法优先）；另外要注意排版细节：
立即学习“前端免费学习笔记（深入）”；
- 给大字加
margin-right: 6px防止紧贴后续文字 - 若首字是中文，推荐用
line-height: 1控制垂直居中，避免上下偏移 - 搭配
text-transform: uppercase可强制英文首字母大写（对中文无影响）
简单实用示例
HTML：
这是一个普通的段落，首字“这”会被放大加粗并左浮动。
CSS：
p::first-letter {float: left;
font-size: 3em;
font-weight: bold;
color: #2a5fa8;
margin-right: 0.15em;
line-height: 1;
}
