::first-letter伪元素仅对块级元素生效，需确保目标为block/inline-block且首字符未被行内标签包裹，仅支持有限CSS属性，中文等语言下行为存在兼容性问题。
first-letter 伪元素只对块级元素生效
直接在 或 这类行内元素上用 ::first-letter 是无效的。浏览器会忽略它，控制台也不会报错，样式就是不出现 —— 这是最常被卡住的地方。
必须确保目标元素是块级（或至少设为 display: block / inline-block），且内容是纯文本或嵌套的普通标签（如 、）。如果首字符被包裹在 里，::first-letter 就找不到“真正的首字母”。
- ✅ 正确：
Hello world
p::first-letter { font-size: 2em; } - ❌ 无效：
Hello即使加了display: block，若内部有标签干扰结构，也可能失效 - ⚠️ 注意：中文、日文等无“字母”概念的语言，
::first-letter仍会选中第一个字形（即首个 Unicode 字符），但部分旧版 Safari 对 CJK 支持不稳定
标点符号和空格会影响 first-letter 的选取范围
::first-letter 实际选取的是“段落开头的首个排版单元”，它会自动跳过开头的空白字符（空格、换行、制表符）和某些标点（如引号、破折号），然后取紧随其后的那个字符（或字符组合，比如带重音的 é）。
立即学习“前端免费学习笔记（深入）”；
这意味着如果你写成：
“Hello”
那么 ::first-letter 会匹配到 H，而不是引号；但如果是：
‘Hello’
某些浏览器可能把 ‘ 视为可归属的前置标点，仍选 H；而 «Hello» 在 Firefox 中可能让 ::first-letter 匹配整个 « —— 行为不完全统一。
- 避免依赖复杂标点前缀，尤其做精确字号/颜色控制时
- 若需稳定控制，建议用
Hello手动标记 -
::first-letter对连字（ligature）或组合字符（如ffi）支持有限，不要指望它能当富文本工具用
first-letter 不支持所有 CSS 属性
它只接受一部分属性，超出范围的声明会被静默丢弃。常见可用的有：font-*、color、background、margin、padding、border、text-decoration、vertical-align（仅限 top/bottom/middle 等有限值）。
以下写法不会生效：
-
width/height（除非配合float或display: inline-block） -
position（relative可用，但absolute无效） -
transform（多数浏览器不支持） -
animation或transition（不能对伪元素单独做动画）
想实现下沉大写字母（drop cap）效果，稳妥做法是：
p::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
margin-right: 0.1em;
}
兼容性与实际渲染差异要手动验证
Chrome 和 Firefox 对 更隐蔽的问题是字体加载时机：如果首字母用的是 Web Font，而字体尚未就绪，浏览器可能先按 fallback 字体渲染 伪元素看着轻量，但一旦混入复杂 DOM 结构、动态内容或字体策略，它的行为边界就很容易模糊。别让它替你做决定。::first-letter 的解析基本一致，但 Safari（尤其是 iOS 15 之前）存在多个已知问题：比如对 letter-spacing 响应异常等。
::first-letter，等字体加载完也不重新计算样式。
::first-letter 做布局核心逻辑 手动包裹 —— 控制力强得多
