::first-letter 失效主因是 html 结构或字符边界问题：父元素非块级、段首含不可见字符、首字被内联标签包裹；需配 float: left、line-height: 0.8 及 margin-right: 0.2em；中文建议用 initial-letter 替代。
直接用 ::first-letter 可以实现，但绝大多数失效不是写法错，而是 HTML 结构或字符边界没对上。
为什么写了 p::first-letter { font-size: 3em; } 却没反应
浏览器根本没选中首字符，常见原因有三个：
- 父元素不是块级容器——
<p></p>没问题，但<span></span>或<div> 被设了 <code>display: flex或display: grid就会失效 - 段首有不可见字符：比如
<p>\n 这是一段</p>中的换行和空格，::first-letter会捕获空白符而非“这”字 - 首字符被内联标签包裹：
<p><em>这</em>是一段</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>，伪元素找不到“裸露”的首字，直接跳过 - 加
float: left后，首字不再参与行高计算，文字自然环绕 - 必须同步设
line-height: 0.8（不是1），否则首字自身高度仍会向下挤压后续文字 -
margin-right: 0.2em是底线值，太小文字贴住首字，太大又显突兀 - 禁用
margin-top/margin-bottom——它们在::first-letter上被忽略 - 段首是
【、“、《等标点时，Chrome 和 Safari 行为不一致，有的选标点，有的跳过去选汉字 - 无法加
aria-label或用 JS 获取——::first-letter不是真实 DOM 节点 - 字体度量差异极大：同一套
font-size: 3em; line-height: 0.8，在思源黑体下刚好，在宋体下底部可能被裁切 - 真要强调语义（比如可访问性、SEO、JS 交互），必须手动包裹：
<p><span class="dropcap">这</span>是一段</p> - 基础用法：
p:first-of-type::first-letter { initial-letter: 3; }（占 3 行高度） - 兼容性 fallback 必须写：
p:first-of-type::first-letter { font-size: 3em; float: left; line-height: 0.8; } - 注意：短段落（如少于 4 行）用
initial-letter容易失衡，建议只对首段启用
::first-letter 必须配 float: left 才能避免撑高整行
只设 font-size 会让首字留在行盒内，强制拉高该行 line-height，造成第一行和第二行之间留出大片空白。浮动是脱离行流最稳妥的方式：
中文首字放大别依赖 ::first-letter 做语义化处理
它对中文支持“表面可用”，但实际不可控：
移动端和多列布局建议换用 initial-letter
::first-letter + float 在小屏上容易溢出或遮挡文字，而 initial-letter 是专为“首字下沉”设计的原生属性，自动处理环绕与对齐：
真正难的不是写几行 CSS，而是确认你控制的那段 HTML 是否“干净”——有没有看不见的空格、是否被 CMS 自动注入了 <span></span>、首字符是不是真的在文本流最前端。这些细节一错，::first-letter 就静默失效，连报错都不会有。
