::first-letter伪元素仅对块级容器中第一个字母或汉字生效，需避免flex/grid布局，支持color等文本属性但background在旧safari不稳定，首字下沉推荐float+font-size+line-height组合，中文需注意safari兼容性，禁用伪元素嵌套。
first-letter伪元素不支持所有CSS属性
直接给 ::first-letter 设置 color 是可行的，但很多人试了没效果，其实是被其他样式覆盖或触发条件没满足。这个伪元素只对块级容器（比如 p、div）里的**第一个字母或标点**生效，且要求该元素本身可渲染文本——如果父元素用了 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 配合。单纯靠 ::first-letter 做下沉容易在 Chrome/Firefox 中错位，尤其遇到连字（ligature）或中英文混排时。
- 给
::first-letter设置float: left、font-size: 3em、line-height: 0.8（避免行高撑开） - 显式声明
color: #d32f2f，别依赖继承 - 父
p元素加overflow: hidden防止浮动溢出影响后续段落 - 避免在
::first-letter上设width或height：它不是盒模型意义上的“块”，强行设可能导致渲染异常
p {
overflow: hidden;
}
p::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
color: #d32f2f;
}
中文首字下沉的兼容性陷阱
中文没有“首字母”概念，但 ::first-letter 仍会匹配第一个汉字——这点在 Chrome 和 Firefox 中正常，但在 Safari 15.4 之前，如果第一个字符是全角标点（如《、「、【），::first-letter 可能完全不触发。
- 测试时务必用真实中文开头（如“今天天气很好”），别用占位符
lorem ipsum - 若需兼容老 Safari，建议用
<span class="dropcap">今</span>天天气很好手动包裹，再对.dropcap样式控制 - 不要依赖
text-rendering: optimizeLegibility来“修复”首字，它对::first-letter无效 - 移动端 iOS Safari 对
float+::first-letter的行框计算更保守，建议加margin-right: 0.2em避免紧贴正文
为什么不能用inline SVG或伪元素嵌套来“增强”颜色
有人想用 ::before 覆盖 ::first-letter 实现渐变色或描边，这是行不通的。CSS 规范明确禁止对同一元素的多个伪元素做层叠控制——::first-letter 和 ::before 的堆叠上下文不一致，结果不可预测，Chrome 可能渲染，Firefox 直接忽略 ::before。
立即学习“前端免费学习笔记（深入）”；
- 需要渐变色？只能用
background: linear-gradient()+-webkit-background-clip: text+-webkit-text-fill-color: transparent，且仅限 WebKit 内核 - 要描边？
text-shadow是唯一通用方案，但注意别设太宽，否则在 Retina 屏上会模糊 - 所有花哨效果都要先验证是否破坏可访问性：屏幕阅读器仍会读取原字符，颜色变化不影响语义
::first-letter 突然失效。 
