::first-line仅作用于块级容器视觉首行，支持color/font/text-decoration等文本属性，不支持margin/padding等布局属性，且无法控制语义首句。
first-line伪元素能选中哪些内容
它只作用于块级容器（如 p、div、h1）的第一行文本，且必须是**视觉上的第一行**——受字体大小、宽度、换行、缩进等影响。不能选中内联元素自身，也不能跨元素生效（比如 span 包裹的文本单独加 ::first-line 无效）。
常见误用：给 span 或 a 直接加 ::first-line，结果毫无反应。这是因为它们默认不是块级上下文；得先设 display: block 或 inline-block 才可能触发，但此时“第一行”逻辑已变，慎用。
支持的CSS属性非常有限
::first-line 只允许使用与文本渲染直接相关的属性，比如 color、font-* 系列、text-decoration、line-height、letter-spacing、word-spacing。其他如 margin、padding、background（部分浏览器支持但非标准）、transform、display 全部被忽略。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 写
p::first-line { background: yellow; }在 Safari 和旧版 Chrome 中可能不生效，因为background不在 CSS 规范明确允许列表里 - 用
font-size: 1.2em没问题，但width: 100px或float: left会被浏览器静默丢弃 - 如果父容器用了
text-align: justify，::first-line的对齐行为仍遵循该设置，无法单独覆盖
和 line-height、font-size 配合时的视觉陷阱
第一行的高度由 line-height 和当前行内最大字号共同决定，而 ::first-line 设置的 font-size 或 line-height 只影响它自己这行——但可能撑高整段的行距，导致后续行位置偏移。
实操建议：
- 避免在
::first-line中大幅调大font-size，尤其当段落较短时，容易让第一行“顶破”上边距 - 若需突出首行又不想扰动布局，优先用
color+font-weight，比改尺寸更稳妥 - 测试时拉宽/缩窄窗口，观察是否某宽度下第二行变成“第一行”（因换行点变化），样式突然消失——这是正常行为，不是 bug
兼容性与现代替代思路
所有主流浏览器都支持 ::first-line，包括 IE9+，但注意语法必须是双冒号 ::first-line（单冒号 :first-line 是旧写法，仅 IE8 及更早支持，现在不推荐）。
真正难处理的是语义化需求：比如只想让“第一句话”变色，而不是“视觉第一行”。这时 ::first-line 无能为力，得靠 JS 提取首句或后端加标签，再用类名控制。
复杂点在于：它依赖渲染结果，而非 DOM 结构；你没法预测用户缩放多少、字体加载是否完成、是否启用了系统级字体替换——这些都会改变“哪一行是第一行”。
