::first-line伪元素仅对块级元素生效，作用于其第一行文本；仅支持color、font-*等有限文本属性；中文段落中可能因零宽/全角空格导致截断偏移；不响应js动态内容更新。
first-line伪元素只对块级容器生效
它不是给任意文本加样式，而是作用于块级元素（比如 p、div、blockquote）的第一行内容。如果你套在 span 或 a 这类行内元素上，样式压根不会应用。
- 常见错误：给
<span class="intro">...</span>加::first-line，结果没反应——换成<p class="intro">...</p>才行 - 注意继承：首行能用的 CSS 属性非常有限，只有部分文本相关属性被允许，比如
color、font-*、text-decoration、line-height；像margin、padding、background（除背景色外）都不行 - 如果父容器宽度动态变化（比如响应式布局），首行范围会随换行位置实时重算，这点和静态写死的首字下沉不同
中文段落里:first-line可能“失效”的真实原因
不是伪元素坏了，而是浏览器按字符宽度+空格/标点位置判断“第一行”，而中文字体渲染、全角空格、零宽空格、甚至某些 Unicode 分隔符都可能导致首行截断点偏移。
- 典型现象：明明写了
p::first-line { font-weight: bold; }，但第一行开头几个字没加粗——检查是否开头有不可见字符，比如\u200b（零宽空格）或\u3000（中文全角空格） - 避免手动敲空格对齐：用
text-indent控制首行缩进，别靠加空格“骗”首行范围 - 字体加载期间可能短暂错乱：如果用了自定义字体且未设置
font-display: swap，首行样式可能延迟应用或错位
和:first-letter混用时的层级与顺序问题
两者可以共存，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部，所以它的样式会叠加在首行之上。这意味着你得小心冲突。
- 比如同时设
p::first-line { color: blue; }和p::first-letter { color: red; font-size: 2em; }，首字母是红色大号字，其余首行文字是蓝色——这是预期行为 - 但若给
::first-line设了background，而::first-letter又设了background，后者会盖住前者，因为层叠上下文更靠前 - 不建议在同一个选择器里反复覆盖，比如先写
p::first-line再写p::first-letter，再回头改::first-line的font-size——容易误判实际生效范围
兼容性与现代排版替代思路
::first-line 在所有现代浏览器里都稳，IE9+ 也支持，但真正麻烦的是它无法响应“内容变化”——比如 JS 动态插入文字后，首行不会自动重算样式。
- Vue/React 中更新段落文本后，
::first-line样式仍基于旧 DOM 快照，除非强制重绘（如 toggle class、修改font-size等触发 layout） - 如果需要精确控制首行高亮、背景色块延伸等效果，用
contenteditable+ JS 计算首行像素宽度再插入span更可靠，虽然重了点 - CSS
@supports (selector(::first-line))没必要加——几乎所有环境都支持，省下这个判断逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
