::first-letter 仅对块级容器内首个字母或标点生效，要求父元素为 block/inline-block，禁用 flex/grid；支持 font-size、float 等装饰性样式，禁用 margin（除左右）、width/height、position；中文需确保无前置空白、使用合适字体。
为什么 ::first-letter 在现代 CSS 中经常“不生效”
不是你写错了，而是它被一堆隐式条件卡住了。这个伪元素只对块级容器里的**第一个字母或标点**生效，且要求父元素是块盒（display: block 或 inline-block 等），不能是 display: inline 或 flex/grid 容器的直接子元素。
常见错误现象：::first-letter 完全没反应、首字样式被重置、中文首字不生效（其实是支持的，但容易因字体或 Unicode 断行问题被忽略）。
- 确保目标元素是块级容器，比如
p、div，不要套在span或a里再试图选它的::first-letter - 避免父元素设了
display: flex或display: grid—— 这会让子p的首字脱离“块级上下文”，伪元素失效 - 如果用了
text-transform: uppercase或lowercase，::first-letter会作用于转换后的字符，不是原始文本
::first-letter 支持哪些样式？哪些绝对不行
它能用的 CSS 属性非常有限，浏览器只允许“装饰性”的排版控制，不能影响布局流。比如可以改颜色、字体大小、行高、浮动，但不能设 margin（除了 margin-left 和 margin-right）、不能设 width/height（除非配合 float）、不能用 position。
典型可用样式：font-size、line-height、color、float、text-decoration、font-weight；不可用：display、transform、border（部分浏览器支持，但行为不一致）、padding（无效）。
立即学习“前端免费学习笔记（深入）”；
- 想让首字下沉两行？设
font-size: 3em+line-height: 1+float: left是最稳方案 - 加边框？别用
border，改用outline或包一层span手动控制（这时就不是伪元素了） - 中文报纸风常用“大字+右侧文字环绕”，必须配
float: left，否则文字不会绕排
中文首字下沉的兼容性坑：字体、断行与标点
中文没有“首字母”概念，但 ::first-letter 对 UTF-8 下的汉字、标点（如《、”、【）都有效——前提是它们确实是 DOM 文本节点的第一个字符。问题常出在 HTML 源码里有空格、换行、或前置注释/内联脚本。
另一个隐形雷区是字体：某些中文字体（尤其免费字体）缺少大字号下的 hinting，放大后边缘发虚；而像 SimSun、Noto Serif CJK 这类衬线字体更接近传统报纸质感。
- 检查 HTML 是否干净：删掉
p开头的空白符，比如<p><!-- 注释 -->今天…会导致伪元素选不到“今” - 避免用
white-space: pre-wrap或pre-line，它们可能把换行符当首字符处理 - 如果首字是引号、括号等标点，浏览器仍会选中它，但视觉上易被忽略——可加
color: #666单独调试确认是否命中
替代方案：什么时候该放弃 ::first-letter 改用手动标记
当需要精确控制首字宽度、添加背景色、响应式缩放、或兼容老版本 Safari（::first-letter 在 iOS <span class="drop-cap">今</span> 反而更可靠。
手动方案不依赖渲染上下文，能用全部 CSS，还能加 JS 动态逻辑（比如根据字数自动选前两字）。代价是语义弱化、维护成本略升——但对内容稳定、设计要求高的报纸类排版，这点成本值得付。
- 用
aria-hidden="true"标记span，避免读屏器重复读首字 - 通过
ch单位控制宽度（如width: 2ch），比固定像素更适配不同字体 - 如果项目已用 Tailwind，直接写
<span class="float-left text-4xl font-serif leading-none">今</span>比折腾伪元素快得多
真正难的不是让首字变大，而是让后续文字严丝合缝地绕排、跨行对齐、在不同字体和字号下保持节奏感。这些细节，伪元素给不了你，得靠反复调 line-height、margin-top 和实际设备预览。
