::first-line仅作用于块级容器元素（如p、div），不支持span等内联元素；仅允许设置color、font-*、text-decoration等文本属性；其范围由实际渲染的首行内联盒决定，受布局和断行影响。
first-line 伪元素能作用在哪些元素上
::first-line 只对**块级容器**（block container）生效，比如 p、div、section 等；它不能用在 span、a 这类内联元素上，即使你给它们加了 display: block，只要不是天然的块级上下文（如段落、标题），也可能被浏览器忽略首行规则。
常见误用：span::first-line 永远不生效 —— 因为 span 不是块级容器，它的内容直接参与父容器的行盒布局，没有自己的“首行”概念。
- ✅ 正确：
p::first-line、div.post-content::first-line - ❌ 错误：
span::first-line、li::first-line（li虽然可显示为块，但部分浏览器对其::first-line支持不稳定） - ⚠️ 注意：
table-cell和flex/grid容器内的子元素不触发::first-line
支持的 CSS 属性非常有限
::first-line 只允许使用一组“文本相关”的样式属性，超出范围的声明会被浏览器静默丢弃（不报错，也不生效）。
- ✅ 允许：
color、font-*（如font-size、font-weight）、text-decoration、line-height、letter-spacing、word-spacing - ❌ 不允许：
margin、padding、border、background（整行背景除外，但仅部分浏览器支持）、width、height、display - ⚠️ 特别注意：
background在::first-line中行为不一致 —— Chrome 支持，Firefox 早期版本会忽略，Safari 16+ 才开始稳定支持；若需高兼容性，避免依赖它
首行范围由实际渲染决定，不是按字符数切分
::first-line 选中的是**该块级元素第一行内所有文本节点的行内盒（inline boxes）**，受换行、断字、字体大小、容器宽度等实时影响。它不是“前 N 个字”，也不是“第一个
立即学习“前端免费学习笔记（深入）”；
- 如果段落开头有
float元素或inline-block图片，首行可能只包含文字的一部分 -
响应式设计下，窗口缩小时，原本第二行的文字可能被挤到第一行，导致
::first-line样式突然应用到更多文字上 - 中文里遇到全角标点或
white-space: nowrap会影响断行位置，进而改变首行覆盖范围 - 不要指望用它实现“首两字下沉”——那是
::first-letter的事，且两者不能嵌套
与 ::first-letter 配合使用时的限制
你可以同时写 p::first-line 和 p::first-letter，但要注意：前者定义整行样式，后者在此基础上叠加首字母效果。不过，::first-letter 的样式会覆盖 ::first-line 中相同属性的设置（如都设了 font-size，以 ::first-letter 为准）。
- ✅ 合理组合：
::first-line { color: #555; }+::first-letter { font-size: 2em; font-weight: bold; color: #222; } - ❌ 冗余写法：
::first-line { background: yellow; }+::first-letter { background: red; }—— 首字母背景会遮盖其所在区域的行背景，视觉上不连贯 - ⚠️ 关键细节：如果
::first-letter设置了float，它会脱离行流，此时::first-line的范围可能跳过它，导致样式“漏掉”紧随其后的文字
@media print）中同样生效，但很多打印机驱动对 ::first-line 渲染支持极差，甚至完全忽略。如果文档需要高质量打印输出，建议用 JavaScript 动态包裹首行文字再加类控制，而不是纯 CSS 依赖。 
