::first-letter要生效必须同时满足三个条件：父元素为块级、首字符前无空白或标签、样式配齐float:left+line-height+font-size；否则浏览器会静默忽略。
::first-letter 要真正“沉下去”，光写 font-size 和 color 没用，必须同时满足三个硬性条件：父元素是块级、首字符前无空白或标签、样式上配齐 float: left + line-height + font-size。
为什么写了 ::first-letter 却完全没反应？
不是选择器写错了，而是浏览器直接忽略——它对 DOM 结构极其敏感：
- 父元素用了
display: flex或display: grid：文本流中断，伪元素静默失效 - 首字符前有换行、空格、HTML 注释（如
<p>\n今天…</p>或<p><!-- 注释 -->今天…</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>） - 首字符被
<strong></strong>、<em></em>等内联标签包裹（如<p><strong>今</strong>天…</p>） - 段落以《、【、“等全角标点开头：伪元素会选中它而非汉字，结果是引号被放大三倍
::first-letter 必须配齐的三个核心样式
缺一不可，单改一个大概率错位或顶开下一行：
-
float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，正文不会绕排 -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字撑高整行，第二行文字直接被顶开甚至重叠 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少用2.5em，2em在多数中文字体下视觉下沉感极弱
中文首字下沉最容易被忽略的兼容性细节
中文没有大小写，字体基线不统一，纯 CSS 几乎无法兜底：
- 全角标点开头无法跳过：
::first-letter不支持“跳过第一个字符”，服务端需正则预处理（如/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/），或前端 JS 动态包裹首汉字 - 某些中文字体（如思源宋体）ascender 偏高，仅调
line-height不够，可加margin-bottom: -0.2em微调；但慎用margin-top，可能触发新 BFC 导致整段偏移 - 父
<p></p>必须加overflow: hidden清除浮动，否则后续段落会上移、重叠；clear: both需额外 DOM 节点，不推荐
真正麻烦的从来不是写几行 CSS，而是上线前得检查 CMS 输出的真实 HTML——用户输入的段落是否以空格开头、是否带注释、是否混入了富文本标签。这些结构问题在 DevTools 里看不到 computed 样式，只会静默失效。
