::first-line仅对渲染后首行生效，非语义摘要；需同时满足块级元素、无破坏行盒结构、纯文本开头、选择器精确匹配四条件才加粗；响应式下加粗范围会随重排动态变化。
::first-line 能自动加粗视觉首行，但不是“摘要”——它只管渲染后第一行文字，不管语义是否为摘要。 如果你把摘要写在 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 里，且该 <p></p> 是块级容器、未被 flex/grid 干扰，那 p::first-line { font-weight: bold; } 就能生效；否则大概率没反应，还找不到原因。
为什么 ::first-line 在摘要段落里不加粗
常见失效场景有三个：
- 父容器用了
display: flex或display: grid—— 这类布局下浏览器根本不生成“行盒”，::first-line直接被忽略 - 摘要段落外层套了
<div class="summary">，但这个 <code><div> 没设 <code>display: block（比如被 CSS 重置成inline或继承了 flex 子项的显示类型） - 摘要开头有空格、
\u200B，或首字符被float/position: absolute提前移出文本流，导致浏览器无法判定“第一行”起始位置 - 目标元素是块级元素：用
<p></p>、<section></section>或显式声明display: block的<div> <li>该元素内部没有破坏行盒的结构：避免在首行插入 <code><img alt="怎样使用css的::first-line让文章摘要自动加粗_基于首行自动识别" >、<span style="max-width:90%"></span>或position: absolute元素 - 首行纯文本开头：HTML 源码中第一字符必须是可见文字，不能是空白符、注释或内联标签占位
- CSS 选择器精确匹配：写
.summary p::first-line比*::first-line更可靠，后者容易被其他组件样式覆盖
p::first-line 加粗必须满足的硬条件
只有同时满足以下四点，样式才会真正作用于文字：
响应式下首行加粗会“漂移”吗
会，而且这是正常行为。浏览器每次重排时都会重新计算“第一行”包含哪些字，窗口缩放、字体加载完成、甚至 font-size 动态变化都可能让加粗范围改变。例如：
立即学习“前端免费学习笔记（深入）”；
p::first-line {
font-weight: bold;
background-color: #f8f9fa;
}
这段代码在桌面端可能加粗前 42 个字符，在手机上变成前 18 个——这不是 bug，是 ::first-line 的设计本意。如果你需要“固定前 N 字加粗”，就得放弃伪元素，改用 JS 切分字符串或服务端注入 <span class="summary-first"></span>。
和 ::first-letter 混用时的隐藏冲突
如果同时写了 p::first-letter 和 p::first-line，要注意浮动首字母会让 ::first-line 失效部分范围：
-
p::first-letter { float: left; }后，被浮动的字母不再参与行内布局，::first-line只能选中它右边的剩余文字 - 此时加粗效果看起来“少了一个字”，其实是首字母已脱离文本流，不算在“第一行文本内容”里
- 若坚持两者共存，建议用
background-color替代font-weight做视觉强调，更稳定
最易被忽略的一点：::first-line 不支持 text-indent 以外的任何缩进类属性，也不接受 margin 或 padding。想靠它实现“首行缩进+加粗”可以，但想“加粗+右侧留白”就得另配 <span></span> 包裹或调整容器 max-width 来控制折行点。
