p::first-line 仅作用于块级元素渲染后的真实首行文本，非字符数选择；失效主因是父容器为flex/grid、首行含内联元素或零宽字符、目标非块级元素；仅支持color、font-size等文本属性，禁用margin/padding等布局属性。
::first-line 不是“选前几个字”的工具，它只响应浏览器 layout 后真实折行的第一行文本。写对了但没效果？八成是布局或内容结构不满足触发条件。
为什么 p::first-line 写了却完全没反应
它不是选择器失效，而是根本没进入匹配流程。常见静默失败场景：
- 父容器用了
display: flex、display: grid或display: table→ 行盒（line box）不生成，伪元素直接被忽略 - 段落开头有
<img>、<span>或零宽字符（如\u200B）→ 首行文本范围被截断或为空 - 目标元素本身是
span、a等默认 inline 元素 → 必须先设display: block，但此时语义和盒模型已变，慎用 - 写了
p:first-line（单冒号）→ 现代浏览器部分兼容，但推荐统一用双冒号p::first-line
::first-line 能用和不能用的 CSS 属性
它只接受参与「文本渲染」的属性，其他声明会被浏览器静默丢弃，不报错也不生效：
- ✅ 安全可用：
color、font-size、font-weight、text-transform、letter-spacing、line-height、background-color - ⚠️ 有风险：
background-image在 Safari 和旧版 Firefox 中常被忽略；text-indent虽能生效，但它作用于整段，不是首行专属控制项 - ❌ 完全无效：
margin、padding、border、width、height、display、transform、position
响应式下首行“跳变”不是 bug，是设计本意
::first-line 绑定的是当前渲染后第一行的实际内容，不是 HTML 源码里的前 N 个字符。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 桌面端首行可能是前 14 个汉字，手机屏下只剩前 3 个 → 样式自动 applied 到新首行
- 字体加载延迟（
font-display: optional）或用户缩放页面 → 首行范围重算，样式可能突然套错位置 - 想降级处理？可用媒体查询：
@media (max-width: 480px) { p::first-line { font-weight: normal; } } - 中英文混排时因字体度量差异，断点偏移明显 → 别靠字符数预期效果，语义化标记（如手动包
<span class="lead-sentence">）更可控
和 ::first-letter 共存时的层叠细节
两者可同时使用，但渲染顺序固定：::first-letter 始终嵌套在 ::first-line 内部，它的样式会叠加在首行之上：
- 如果都设了
color，::first-letter的颜色会覆盖::first-line的颜色 - 如果
::first-line设了background-color，而::first-letter设了font-size: 2em，大写字母会浮在背景色上，不会被裁切 - 注意：若
::first-letter触发了浮动（float: left），可能破坏行盒结构，导致::first-line失效
真正难的不是写对语法，而是理解它依赖 layout 阶段的一次性计算 —— 动态插入内容（Vue/React 的 v-html 或 innerHTML）不会触发重算，首行样式仍按旧文本宽度生效。需要强制刷新时，临时 toggle 一个无关 class 是最轻量的做法，但别滥用。
