::first-letter生效需满足块级容器、首字符未被内联标签包裹、无前置空白等严格条件；失效主因是HTML结构或CSS环境不合规，而非选择器错误。
::first-letter 必须作用于块级元素，且首字符不能被内联标签包裹或前面有空白。它不是“写了就下沉”，而是有一套严格的触发条件。如果你写了 ::first-letter 却没反应，大概率是 HTML 结构或 CSS 环境不满足要求，而不是选择器写错了。
为什么 ::first-letter 样式写了却完全不生效
这个伪元素只对「块级容器中第一个文字字符」起作用，且该容器必须能生成格式化上下文。常见失效场景包括：
- 父元素设了
display: flex或display: grid—— 这会切断文本流，::first-letter静默失效 - 首字符被
、或包裹，比如今天…
- HTML 中首字符前有换行、空格或注释：
\n 今天…
- 用了
text-transform: uppercase后又想让首字保持原形——::first-letter作用的是转换后的字符
实现真正“下沉”的三个关键样式组合
光放大字号只是变大，不是下沉。要让后续文字自然环绕、首字视觉上“沉”进段落，得靠这三个属性协同：
-
float: left：让首字脱离文档流，为右侧文字腾出空间；缺了它，文字不会绕排 -
line-height: 0.75（无单位）：必须显式设置，否则继承父级行高，放大后会把整行顶高；数值越小，下沉感越强，但太小（如0.6）可能截断 -
font-size: 2.8em：建议 ≥2.5em；中文可用clamp(2rem, 4vw, 3.5rem)适配响应式
别用 vertical-align 微调位置——它在浮动上下文中不可靠；改用 margin-top 或 transform: translateY() 更可控。
中文首字下沉的特殊处理和兼容性坑
中文支持 ::first-letter，但浏览器对全角标点（如《、【、”）的识别不一致，Safari 15.4 之前可能直接跳过。实操中要注意：
- 确保首字符是真实汉字，比如用
今天天气很好
- 避免依赖字体自带的“下沉”特性；细黑体放大后容易发虚，建议加
font-weight: bold - iOS Safari 在缩放 viewport 后偶有重绘异常，可在
@media中关闭float，改用display: inline-block+vertical-align: top - 父容器加
overflow: hidden是防止浮动溢出影响后续段落的最简方案
真正难的不是写对那几行 CSS，而是确认 DOM 结构干净、字体渲染稳定、移动端边界情况都被覆盖。很多“失效”问题，其实发生在 HTML 层——比如富文本插入时带了零宽空格或换行符，连开发者工具都看不出端倪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
