::first-line伪元素仅对块级元素渲染后的视觉首行生效，不作用于内联元素或HTML源码首行；仅支持font-weight、color等文本属性，禁用margin、background等盒模型属性；响应式下首行范围会动态重算。

::first-line 伪元素是实现文本首行加粗的原生、无侵入方案，但**它只对块级元素的视觉首行生效，不是“前几个字”，也不是“HTML源码第一行”**。写错选择器、套错容器、或用了不支持的属性，样式会静默失效，连控制台都不会报错。

为什么 p::first-line 没反应？常见三类硬性失效

浏览器判定首行依赖渲染后的行盒（line box），不是字符数或换行符。以下情况会直接让 ::first-line 失效：

• 目标元素不是块级：比如给 <span> 或 <em> 写 span::first-line —— 完全无效
• 父容器破坏了 BFC：把 <p> 套在 display: flex 或 display: grid 的 <div> 里，部分 Safari 和旧 Chrome 会跳过首行计算
• 首行被内联元素打断：开头有 <img>、<span>、或零宽空格 \u200b，浏览器无法形成连续文本行盒，首行范围丢失

::first-line 能用哪些属性？别乱写 margin 和 background

::first-line 不是普通选择器，CSS 规范明确限制可用属性。超出范围的声明会被浏览器静默丢弃：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• ✅ 安全可用：font-weight、color、font-size、text-transform、letter-spacing、line-height
• ⚠️ 条件可用：background-color 在 Chrome/Firefox/Safari 16.4+ 稳定，但旧 Safari 会忽略；background-image 或 background 简写在 Safari 中可能断裂
• ❌ 完全无效：margin、padding、border、width、height、display、position —— 写了也没用，别浪费调试时间

响应式下首行加粗会“漂移”，这是设计，不是 bug

窗口缩放、字体加载完成、甚至 font-size 动态变化，都会触发重排，::first-line 会重新计算并应用样式。这意味着：

立即学习“前端免费学习笔记（深入）”；

• 桌面端可能加粗前 50 字，移动端只剩前 12 字 —— 正常行为
• 如果需要“固定前 N 字加粗”，::first-line 不适用，得用 JS 截取字符串或服务端注入 <span>
• 配合 @media 微调时，建议只调 font-weight 或 color，避免在窄屏下因 font-size 变化导致首行范围剧烈跳变

真正容易被忽略的是：首行判定完全依赖渲染结果，哪怕你写了 200 个汉字，只要容器够宽，它仍算作“一行”；一个超长英文单词换行，首行可能只剩一个字母——加粗和变色也只作用于那一个字母。