::first-letter和::first-line伪元素仅对块级容器（如）内首字符或首行文本生效，不适用于、等内联或替换元素；前者选中视觉首字形且样式受限，后者匹配动态计算的首行文本并受排版影响。
什么时候用 ::first-letter 和 ::first-line
这两个伪元素只对**块级容器内的首字符或首行文本生效**，比如 <p></p>、<div>、<code><blockquote></blockquote>。不能用在 <span></span> 或内联元素上，也不支持 <input>、<button></button> 等替换元素。
::first-letter 的常见限制和写法
它选中的是段落开头的**第一个字形（glyph）**，但实际行为比“第一个字符”复杂得多：
- 会跳过所有前置空白、换行、制表符，以及标点符号（如引号、破折号）——比如
"Hello中的"不算，真正生效的是H - 中文里选中的是第一个汉字/字母/数字；英文中若首词是缩写如
U.S.A.，通常只选中U，后续点号不参与选中 - 必须配合
display: inline（默认值）或inline-block才能生效；设成block会失效 - 支持的样式非常有限：仅
font-*、color、background、margin、padding、border、text-decoration、text-transform、line-height等少数属性
示例：
p::first-letter {
font-size: 2em;
font-weight: bold;
float: left;
margin-right: 0.2em;
}
::first-line 的作用范围和陷阱
它匹配块容器内**视觉上的第一行文本**，而不是源码中第一行——这意味着它受 width、font-size、换行策略影响，且会随窗口缩放动态变化：
- 只作用于块级元素内部的纯文本内容，如果首行开头是
<img alt="css选择器:first-letter和:first-line如何应用_调整首字母和首行样式" >或<span></span>，那些元素本身不会被::first-line样式影响，但其内联文本仍可能被覆盖 - 支持的样式比
::first-letter稍多，但仍不支持width、height、position、float等布局属性 - 不能嵌套使用，比如
p::first-line span是无效选择器 - 若段落开头有
text-indent，缩进部分仍属于第一行，会被包含在内
示例：
p::first-line {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
兼容性和调试要点
现代浏览器基本都支持双冒号写法（::first-letter），但旧版 IE 只认单冒号（:first-letter）。不过现在一般无需降级兼容 IE。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox/Safari 对中文首字处理一致，但 Safari 在某些字体下可能把全角标点误判为首字符
- 如果样式没生效，先检查父元素是否为 block，再确认是否被其他规则（如
font-family继承链）覆盖 - 用 DevTools 选中元素后，在 Styles 面板里手动勾选
::first-letter或::first-line伪类，能直接看到是否被识别 - 注意：CSS Grid/Flex 容器里的子项若设为
display: block，其内部文本仍可触发::first-line；但若整个容器是display: inline-flex，则可能失效
真正麻烦的不是怎么写，而是首字/首行的“边界”由渲染引擎动态决定——同一段 HTML，在不同字号、宽度、甚至字体加载状态变化时，::first-line 覆盖的文本范围都可能不同。
