:first-letter仅对块级元素首字符生效，:first-line匹配视觉首行且受排版影响；二者不继承非可继承属性，不可嵌套，兼容性好但动态场景不可靠。
用 :first-letter 选中段落首字母时，必须确保它处于块级上下文中
浏览器只对块级元素（如 <p></p>、<div>、<code><section></section>）的首个**字母或标点符号**生效。如果父容器是 inline 或被 display: inline 覆盖，:first-letter 会静默失效。
常见踩坑点：
- 给
<span></span>或<a></a>直接加:first-letter—— 不起作用 - 首字符是空格、换行或 HTML 注释 —— 实际选中的可能是后续可见字符，行为不稳定
- 中文、日文等无“字母”概念的文字也能触发，但仅限第一个 Unicode 字符（包括标点），不是“首字”语义
示例：正确写法
p {
font-size: 16px;
}
p:first-letter {
font-size: 2em;
font-weight: bold;
float: left;
line-height: 0.8;
}
:first-line 只作用于块级元素的第一行渲染结果，不是前 N 个字符
它的匹配基于最终排版后的**视觉第一行**，受 width、font-size、换行、word-break 等影响。同一段文字在不同容器宽度下，:first-line 包含的文本可能完全不同。
注意事项：
- 不能设置
margin、padding、height、border等会破坏行盒布局的属性（部分浏览器会忽略） - 支持的样式有限：
color、font-*、text-*、line-height、letter-spacing等较安全 - 如果段落开头有
float元素（比如:first-letter浮动了），:first-line会绕过它计算第一行范围
典型用途：模拟报纸首行缩进或强调
p:first-line {
text-transform: uppercase;
letter-spacing: 2px;
}
伪元素嵌套与继承行为容易引发样式冲突
:first-letter 和 :first-line 是独立伪元素，它们不继承父元素所有样式，也不互相继承。比如父元素设了 font-weight: bold，:first-letter 默认不会继承 —— 除非显式声明或依赖浏览器默认继承链。
关键细节：
-
:first-letter会继承font、color等可继承属性，但float、position这类非继承属性必须手动写 -
:first-line的font-size若未设置，会使用父元素值；但若父元素用rem，而根字体变化，它不会动态响应（因它是静态计算的） - 两者不能同时用在同一个选择器里（如
p:first-line:first-letter无效），必须分开写
兼容性与现代替代方案的取舍
IE8+、Chrome 1+、Firefox 1+ 都支持这两个伪元素，但 Safari 在某些 Flex/Grid 容器内对 :first-line 的识别有延迟或遗漏。更麻烦的是，它们无法通过 JavaScript 获取或操作（getComputedStyle 返回 null）。
当需要精确控制或动态逻辑时：
- 首字母：可用
innerHTML截取第一个字符并包裹<span></span>，再样式化 - 首行：没有可靠 CSS 方案，通常需后端或 JS 计算字符数 + 字体度量（如
canvas.measureText），再插入<span></span> - CSS
@supports无法检测伪元素支持程度，只能靠 UA 判断或特性测试
真正难处理的从来不是怎么写，而是当文字方向（rtl）、字体加载延迟、动态内容注入、响应式断行同时发生时，:first-letter 和 :first-line 的表现会变得不可预测。
