::first-line 仅对块级元素生效，支持有限CSS属性；必须用块级元素包裹文本，依赖BFC，内联元素或空内容下无效；推荐双冒号写法，动态内容会重算首行。
::first-line 只对块级元素生效，且仅支持有限的 CSS 属性；用错选择器写法或套在 <span></span> 这类内联元素上，样式根本不会应用。
必须用块级元素包裹文本
浏览器只会在渲染完成、文本自动换行后，才识别哪一行是“第一行”。这个过程依赖块格式化上下文（BFC），所以 ::first-line 只能作用于 <p></p>、<div>、<code><section></section> 等默认 display: block 的元素。
常见错误包括：
- 给
<span class="intro">...</span>加.intro::first-line—— 无效，因为<span></span>是内联元素 - 用
display: inline强制改写块元素 —— 会直接让::first-line失效 - 内容为空或只有空白符（如全空格、
<br>）—— 浏览器无法计算首行，样式不触发
可用属性比你想象中少得多
::first-line 不是普通选择器，它受规范严格限制。以下属性可安全使用：
-
font、font-size、font-weight、line-height、text-transform -
color、background-color、text-decoration -
letter-spacing、word-spacing、vertical-align
这些属性不可用：
-
margin/padding—— 会静默忽略 -
width/height/position—— 不起作用 -
border—— 即使写了也不会渲染 -
display—— 设置为inline-block或flex会破坏伪元素逻辑
双冒号写法 (::first-line) 是现代标准，但单冒号 (:first-line) 仍被广泛支持
从 CSS2 开始就允许用单冒号写法，CSS3 明确区分伪类（:hover）和伪元素（::first-line），推荐用双冒号以示语义清晰。但实际项目中，两种都可工作：
p::first-line { color: #2c3e50; font-weight: 600; }
注意：不要混用，比如 p:first-line 和 p::first-letter 同时存在时，部分旧版 Safari 对解析顺序敏感，建议统一风格。
动态内容下首行可能“漂移”，需留意重排行为
当文本通过 JS 插入、字体加载完成、或窗口 resize 导致换行位置变化时，::first-line 会重新计算并应用样式——这是它的优势，但也带来隐患：
- 如果首行刚好卡在断字边界（如英文连字符、CJK 字间空隙），不同浏览器可能切分不同
- 配合
font-feature-settings或自定义字体时，首行字符数可能意外变化 - 用
text-indent缩进首行时，::first-line样式仍作用于视觉首行，但缩进本身不属于该伪元素控制范围
最易被忽略的一点：当段落里嵌了 <img> 或 <em></em> 这类内联元素，且它们恰好出现在首行末尾，::first-line 仍只作用于文字部分，不会影响这些元素的样式——它真真正正只管“第一行的纯文本”。
