::first-letter 失效主因是html结构或css属性不满足前提：父元素为flex/grid、首字符前有空白/注释/内联标签、以中文标点开头；必须同时设置float: left、line-height: 0.75、font-size（≥2.5em）才生效。
为什么写了 ::first-letter 却完全没反应
不是选择器写错了，而是浏览器根本没选中首字符——::first-letter 在不满足硬性前提时会静默失效，DevTools 里都看不到 computed 样式。
- 父元素用了
display: flex或display: grid，文本流被切断，伪元素直接不触发 -
<p></p>开头有换行、空格、HTML 注释（比如<p><!-- intro -->今天…</p>） - 首字被
<strong></strong>、<em></em>等内联标签包裹，伪元素无法穿透定位 - 段落以中文标点开头（如《、【、“），
::first-letter会选中标点而非汉字，结果是引号被放大三倍
::first-letter 必须同时写的三个核心样式
缺一不可。单改 font-size 或只加 color，只会让首字变大、撑乱行高，不是下沉。
-
float: left：唯一能触发文字环绕的属性；不加它，后续文字不会绕排，首字就卡在原位 -
line-height: 0.75（无单位）：必须显式设置；继承父段落默认line-height: 1.6会让放大后的首字顶开第二行，甚至重叠 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少用2.5em，2em在多数中文字体下视觉无下沉感
中文场景下最容易忽略的细节
中文没有大小写，基线不统一，标点干扰强，纯 CSS 很难兜底。
-
::first-letter无法跳过开头标点选第二个字；CMS 输出或用户输入含《、”、【时，必须靠服务端正则预处理，或前端 JS 动态提取首汉字并包裹 - 思源宋体等字体 ascender 偏高，仅调
line-height不够，可加margin-bottom: -0.2em微调，但慎用margin-top，可能意外触发新 BFC 导致整段偏移 - 浮动会导致父
<p></p>高度塌陷；推荐给p加overflow: hidden清除浮动，比clear: both更轻量
真正麻烦的不是写三行 CSS
而是确认 HTML 结构干净、字体渲染可控、CMS 输出稳定——这些地方出问题，::first-letter 就连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
