ul/ol::first-line 无效，因列表本身无文本；应使用 li::first-line，仅支持 color、font-weight 等文本属性，不支持 margin、width 等布局属性。
::first-line 不能直接用于 ul 或 ol 列表本身——它只对**块级容器中实际渲染出的第一行文本**生效，而列表元素默认是块级，但它的“第一行”往往为空（因为 li 才是内容载体），所以直接写 ul::first-line 几乎总是无效。
为什么 ul::first-line 或 ol::first-line 完全没反应
列表元素（ul/ol）自身不包含可渲染的文本内容，它的子元素 li 才承载文字。浏览器不会为一个空的、仅起结构作用的 ul 生成行盒（line box），因此 ::first-line 根本无文本可选。即使你给 ul 加了 padding 或 border，那也不是“文本首行”。
- 常见错误：
ul::first-line { color: red; }—— 没有文本，伪元素不触发 - 更隐蔽的失效：父
ul被设为display: flex或grid，彻底关闭行盒生成能力 - 如果
li是display: inline或被float干扰，其内部文本可能无法形成稳定行盒，导致li::first-line也失效
真正该用 li::first-line 的场景和写法
要让首行样式落在列表项上，必须把选择器落到具体的 li 元素，并确保它是块级上下文。例如新闻摘要列表、产品特性条目等，每项开头几个字需要视觉强调。
- 必须写成
li::first-line，而不是ul li::first-line（后者冗余，但不报错） -
li默认是display: list-item，属于块级格式化上下文，满足基础条件 - 避免在
li上使用white-space: nowrap，否则整条内容压成一行，::first-line就等于整行，失去“首行”意义 - 若
li内含span或图标（如::before伪元素），只要它们不破坏行内流，::first-line仍能正常作用于文字部分
示例：
p.feature-list li::first-line {
font-weight: bold;
color: #2c3e50;
}
::first-line 在 li 中支持哪些属性，哪些会静默失效
它只接受文本渲染相关属性，超出范围的声明会被浏览器忽略且不报错——这是调试时最易踩的坑。
- ✅ 安全可用：
color、font-weight、font-size、text-decoration、letter-spacing、line-height（注意：仅影响该行高度，可能撑开li行距） - ❌ 明确禁用：
margin、padding、border、width、height、display（设inline也没用，它本来就是内联上下文） - ⚠️ 慎用：
background-color可用但需确认无inline-block子元素打断；text-shadow在旧版 Safari 中可能不渲染
响应式下 li::first-line 样式“跳变”的真实原因
不是 bug，是设计使然：::first-line 绑定的是**当前视口宽度下实际折行后的第一行内容**。当用户缩放页面或切换设备，原本两行的 li 变成三行，首行内容就变了——样式自动迁移到新首行，看起来像“跳”了。
- 典型表现：桌面端首行是“高性能处理器”，移动端因换行变成“高性能”，后半截“处理器”掉到第二行，样式只剩两个字加粗
- 无法靠 CSS 预判这种变化，因为它依赖字体加载完成、系统字体替换、甚至浏览器渲染管线微调
- 若业务强依赖“固定前 N 字”样式（比如法律条款首句标红），别用
::first-line，改用服务端插入<span class="lead">...</span>或 JS 动态切分
复杂点在于：你写的是一行 CSS，但它背后牵扯排版引擎、字体度量、响应式重排——所有这些都在用户端实时发生，不受你控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
