::first-letter仅作用于块级元素首字符，需避免inline显示、前置空格或注释；仅支持有限CSS属性如font-size、color、float等；中文有效但受字体影响；与::first-line共存时前者优先级更高。
段落首字母变大变色为什么没生效
常见原因是 ::first-letter 只作用于**块级元素的首个字母或标点**，且该元素不能是 display: inline。如果父容器是 inline 或 inline-block，伪元素直接不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标
<p>是标准块级元素（默认就是），不要手动设成inline - 首字符不能是空格、换行或 HTML 注释；
<p> Hello</p>中的空格会让::first-letter失效 - 避免在首字母前写注释，比如
<p><!-- 注释 -->Hello</p>，浏览器会跳过注释后找“第一个可渲染字符”，但部分引擎行为不一致
::first-letter 支持哪些 CSS 属性
它只接受有限的样式声明，超出范围的会被忽略——不是报错，而是静默丢弃。比如 margin、padding、border 都可用，但 display、position、float（除非值为 left 或 right）基本无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 能用的典型属性：
font-size、font-weight、color、line-height、text-transform、float（仅 left/right）、margin（上下左右都行） - 别试
width或height：对首字母无意义，浏览器不实现 -
float: left是最常用组合，配合margin-right实现传统首字下沉效果
中文段落首字被当成标点或失效怎么办
中文没有“首字母”概念，但 ::first-letter 仍会选中第一个**可渲染的 Unicode 字符**，包括汉字、数字、全角符号。问题常出在字体支持或编码上：某些字体里汉字字形太小，或用了不支持 OpenType 特性的字体，导致视觉上没变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
font-size: 2em和color: #333等强反馈样式，先确认是否真生效（而不是“看起来没变”） - 避免用
font-family列表里排第一的字体是等宽或极简字体（如'Courier New'），它们对汉字渲染可能异常 - 如果首字符是全角括号、引号等，有些旧版 Safari 会跳过，稳妥起见可手动包裹：
<p><span class="dropcap">《</span>标题内容...</p>，再用类控制
和 ::first-line 混用时的层级与冲突
::first-letter 始终嵌套在 ::first-line 内部，所以当两者同时设置 color 或 font-size 时，::first-letter 的声明优先级更高——不是因为特异性，而是渲染层顺序决定的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要指望
::first-line能覆盖::first-letter的字体大小；反过来可以，比如用::first-letter { font-size: 3em; }+::first-line { font-size: 1.2em; }，首字仍保持 3em - 若需首行缩进 + 首字下沉，
text-indent必须设在段落本身，而非::first-line，否则缩进会把下沉字一起推走 - Chrome 115+ 开始支持
::first-letter的transform，但 Firefox 和 Safari 尚未跟进，别依赖
真正麻烦的是换行和响应式：一旦窗口变窄导致首字所在行折行，::first-letter 依然只锚定原始第一个字符，不会随布局重算。这点没人提醒，但改版时最容易漏测。
