p::first-letter仅对块容器内首个字母生效，需确保p为标准块级元素、无display:inline、父容器无font-size:0、段落开头无空白字符；样式仅支持字体、颜色、背景等有限属性，推荐用float:left实现下沉效果。
用 ::first-letter 选中首字但必须满足块级上下文
直接写 p::first-letter 不一定生效，因为 ::first-letter 只对「块容器」（block container）内的首个字母起作用，而如果段落被包裹在 inline 元素里（比如 或未清浮动的父容器），或者该段落本身被设为 display: inline，伪元素就会失效。确保目标 p 是标准块级元素，且没有被意外降级为内联。
常见误操作包括：给 p 加了 display: inline、父容器用了 font-size: 0（导致首字尺寸计算异常）、或段落开头有空格/换行符（::first-letter 会跳过空白字符，但若首字符是全角空格或 ，可能无法识别为“字母”）。
::first-letter 的样式限制和兼容性要点
这个伪元素能设置的 CSS 属性非常有限：仅支持字体相关（font-*）、颜色（color）、背景（background-*）、边框（border-*）、内边距（padding）、外边距（margin）、文本装饰（text-decoration、text-transform）等；不能设置 width、height、flex、grid、position（除 float 外）等布局属性。
关键实操建议：
- 用
float: left实现下沉效果最可靠，配合line-height和margin-right控制环绕排版 - 避免在
::first-letter上设display: block—— 大多数浏览器不支持，且会破坏默认行为 - IE 和旧版 Safari 对标点符号（如引号、括号）的首字识别不稳定，建议首字用 ASCII 字母或汉字，避开开头是标点的段落
- Chrome / Firefox / Edge（Chromium）目前支持良好，但 Safari 15.4+ 才修复了某些嵌套
ruby场景下的错位问题
只对首个 p 生效：用 :first-of-type 或 :nth-of-type(1)
如果页面有多个段落，但只想让第一个下沉，不能只靠 p::first-letter，否则每个 p 都会触发。必须组合结构伪类限定范围。
推荐写法：
p:first-of-type::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
margin-right: 0.2em;
}
注意：:first-of-type 比 :nth-child(1) 更安全——如果段落前面有 h2 或 div，:nth-child(1) 就会失效；而 :first-of-type 只看同类型元素中的第一个 p，更符合语义预期。
补充说明：
- 若首个段落不在文档流最前（比如被
position: absolute移走），仍会匹配，因为它按 DOM 顺序判断，而非渲染顺序 - 不要用
:first-child，除非你 100% 确定p是父容器的第一个子元素 - 若用 BEM 类名控制（如
.article__content p:first-of-type），务必确认选择器权重足够，避免被其他规则覆盖
中文首字下沉要防「字重失真」和行高塌陷
中文不像英文有自然的升部（ascender）和降部（descender），单纯放大字号容易让字形发虚或与后续文字基线错位。直接设 font-size: 4em 常导致下沉字“浮”在行上，而不是真正“沉”进段落。
解决办法：
- 用
line-height: 0.7～0.85压缩首字行高，让后续文字向上贴合 - 加
vertical-align: bottom或top微调对齐（bottom对多数中文字体更稳） - 慎用
font-weight加粗——部分中文字体加粗后字宽突变，破坏左右间距，优先用字体自带的 bold variant - 如果首字是「一」「二」等笔画少的字，考虑用
letter-spacing稍微撑开，避免视觉孤立
真正难处理的是字体加载时的闪动：系统字体还没加载完，首字可能先以小字号渲染再跳变。如需极致体验，可结合 @font-face 的 font-display: optional 或 JS 检测字体就绪后再加 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
