::first-letter 对标题无效是因为它仅作用于块级元素且要求直接包含文本，若标题被 flex/grid 包裹、嵌套内联元素、受 text-transform 干扰或存在 DOM 结构偏差（如前置注释），均会导致失效；兼容性上 Safari 支持 float 方案最佳，IE 完全不支持标题元素，响应式下需用媒体查询分段控制尺寸并避免长标题。
first-letter 为什么对标题没反应
因为 first-letter 只作用于块级元素（或 inline-level 元素在 display: block/inline-block 等上下文中），而像 <h1></h1> 这类标题默认是块级，但如果你的标题外层被 display: flex、display: grid 或包裹了 inline 元素（比如 <span></span> 包着文字），它就可能失效。常见错误现象是加了样式却完全没变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是块级且直接包含文本（不要嵌套
<span></span>或<em></em>包首字） - 检查是否被
text-transform: uppercase/lowercase干扰——有些浏览器下first-letter不会作用于已被转换的字符 - 避免用
float或position: absolute直接作用在first-letter上，容易触发渲染异常 - 简单验证：给
h2::first-letter加个color: red，看首字是否变红——这是最快判断选择器是否生效的方法
first-child 和 first-letter 的关系其实很弱
:first-child 是选中父元素的第一个子元素，::first-letter 是伪元素，两者没有绑定关系。很多人误以为写成 h2:first-child::first-letter 就能“精准定位第一个标题的首字”，但实际只要 <h2></h2> 确实是父容器第一个子节点，这个写法才有效；一旦前面有注释、空格文本节点或 <div>，它就失效。
<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>
<ul>
<li>别依赖 <code>:first-child 锁定标题——用 class 更稳，比如 .title-dropcap::first-letter
<h2></h2> 真的是父元素的 :first-child
::first-letter 不能链式写成 h2:first-child::first-letter:hover，hover 必须单独写在伪元素上：h2:first-child::first-letter:hover
首字下沉的常用尺寸与兼容性坑
实现下沉核心靠 font-size 放大 + line-height 或 float 控制排版，但不同方案兼容性差异大。Safari 对 float: left 配合 ::first-letter 支持最稳；Chrome 最新版本已支持 display: block + margin，但旧版会忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法：
h2::first-letter { float: left; font-size: 3em; line-height: 0.8; margin-right: 0.2em; } - 避免用
vertical-align——它在::first-letter上多数浏览器不生效 - IE 完全不支持
::first-letter作用于<h1>–<h6></h6> </h1>，如需兼容，得用 JS 插入<span></span>包首字 - 字体加载期间可能出现首字错位，可加
font-display: block或用@font-face的font-display: optional缓解
响应式场景下首字下沉容易崩
固定 font-size: 3em 在小屏上会撑破容器，而用 rem 或 vw 又难和行高对齐。更麻烦的是，当标题换行时，::first-letter 仍只取第一个字符，但视觉上它可能不在第一行开头（比如标题两行，首字在第二行）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询分段控制尺寸：
@media (max-width: 768px) { h2::first-letter { font-size: 2.2em; } } - 避免让标题过长——首字下沉本质适合短标题（≤12 字），长标题建议改用其他强调方式
- 测试真机横竖屏切换，某些 Android WebView 会在 resize 后丢失
::first-letter样式，需强制重绘（如 toggle class）
首字下沉看着简单，真正卡住人的往往是 DOM 结构的细微偏差、字体加载时机、以及响应式断点下的尺寸失配——这些地方没法靠“复制代码”绕过去，得一行行 inspect 元素看计算值。
