::first-letter需父元素为块级且无前置空白或内联标签包裹，否则不生效；必须配合float:left、合适line-height（0.75～0.85）和margin-right（≥0.2em）才能实现正确下沉效果。

::first-letter 必须加 float: left 才能真正“放大并下沉”，只写 font-size 只会让首字变大、不环绕、还撑乱行高。

为什么写了 ::first-letter 却完全没反应

不是 CSS 写错了，是浏览器压根没生成这个伪元素——它对结构极其挑剔：

• 父元素必须是块级容器（<p></p>、<div> 默认符合；但加了 <code>display: flex 或 display: grid 就直接失效）
• 段首不能有任何空白：HTML 里写成 <p>\n 今天</p> 或 <p><!-- 注释 -->今天</p>，伪元素会捕获换行符或注释开头，跳过“今”字
• 首字符不能被内联标签包裹：<p><strong>今</strong>天</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 中的“今”已被 <strong></strong> 包住，::first-letter 找不到裸露的首字符
• 段首是《、【、“、— 等全角标点时，Chrome 可能放大标点，Safari 可能跳过它去选下一个汉字，行为不一致

float: left + line-height 配合失当会导致文字上爬或重叠

浮动只是让首字脱离文档流，但它的行框高度仍由 line-height 控制。若不干预，放大后的首字会把整行顶高，第二行文字就从它“脚下”开始排，视觉上压在一起：

• line-height 必须显式设置为无单位数值，推荐 0.75～0.85；设成 1 在中文字体下常导致顶部截断，设成 1.2 或继承父级值（如 1.6）必然撑开第一行
• margin-right 别省，至少 0.2em；太小（如 0.05em）会让正文紧贴首字边缘，尤其在小字号段落里显得拥挤
• 避免给 ::first-letter 加 padding 或 border——旧版 Safari 和 Edge 渲染位置可能偏移，且 padding-top/bottom 在部分引擎中无效
• 父 <p></p> 建议加 overflow: hidden 清除浮动，比 clear: both 更轻量，也防塌陷导致后续段落上移

中文场景下 ::first-letter 的实际可用边界

它不识别“中文首字”，只按 Unicode 字符顺序取第一个可渲染字符。这意味着：

• 段首是“《论语》开篇……”，::first-letter 会选中《，不是“论”；不同浏览器对标点的处理逻辑不统一（截至 2026 年 8 月）
• 没有 text-transform 效果，所谓“首字大写”在中文里纯属错觉；汉字本身无大小写之分
• 若需稳定控制（比如强制放大第一个汉字、跳过所有前置标点），JS 提前提取并包裹首汉字仍是更可靠方案，例如：<p><span class="drop-cap">论</span>语开篇……</p>
• font-size 推荐用响应式写法，如 clamp(2rem, 4vw, 3.5rem)，固定 3em 在窄屏小字体下可能过大，在宽屏大字体下又不够沉

真正难的不是写出那几行 CSS，而是让放大后的首字和后续文字在各种字体、字号、设备宽度下都保持视觉对齐——这得靠反复调 line-height 和 font-size 的比值，而不是套模板数值。