如何使用first-letter伪元素在CSS中实现首字下沉并设置特定颜色？

本文共计1066个文字，预计阅读时间需要5分钟。

直接给``标签设置`::first-letter`是可行的，但很多人尝试了没有效果，实际上是被其他样式覆盖或触发条件不充分。这个伪元素只对块级元素中的第一个字母或符号生效（例如`

`、``等）。若要使其生效，确保该元素本身可渲染文本，且父元素使用了`display: flex`或`display: grid`等布局方式。如果父元素使用了这些布局，`::first-letter`会失效。

• 必须确保父元素是块级、非替换元素，且未被 float 或 position: absolute 干扰布局流
• font-size、color、line-height、text-transform 等基础文本属性可用；margin、padding、border 也支持，但 background 在部分旧版 Safari 中表现不稳定
• 不要和 text-indent 混用：首字下沉常用 float: left + 大字号，此时 text-indent 作用于整行，可能把首字“推偏”

实现首字下沉+独立颜色的最小可靠写法

真正能跨浏览器稳定工作的组合是：float: left + 显式 color + 足够的 line-height 配合。