::first-line伪元素是段落首行加粗变色的唯一标准方案，需满足块级容器、纯文本内容、现代浏览器三前提；常见失效因非块级元素或内联元素打断首行计算，仅支持font-weight、color等文本属性，不支持布局属性，IE完全不支持。
::first-line 伪元素是实现段落首行加粗并变色的唯一标准方案，但必须满足块级容器、纯文本内容、现代浏览器这三项前提，否则样式不会生效。
为什么 ::first-line 有时完全没反应
最常见原因是目标元素不是块级元素，或者内部混入了 inline 元素（比如 <span></span>、<img alt="CSS如何实现首行文字加粗并变色_利用::first-line伪元素进行排版" >、<a></a>）打断了“纯文本第一行”的计算逻辑。浏览器会按视觉渲染后的第一行来匹配，而非 HTML 源码顺序。
- 确保父元素是
p、div、blockquote等块级元素，且未被设为display: inline或flex/grid容器 - 避免在段落开头插入
<br>
、<span style="display:inline-block"></span>这类会干扰行盒生成的元素 - 如果用了
line-height或font-size动态变化，首行范围可能随视口缩放而跳变——这不是 bug，是规范行为
::first-line 支持哪些样式属性
它只接受部分文本相关属性，font-weight 和 color 是安全可用的，但像 margin、padding、background（虽部分浏览器支持，但不保证跨平台一致）或任何布局类属性一律无效。
- ✅ 可用：
font-weight、color、text-decoration、letter-spacing、font-variant - ❌ 不可用：
margin、padding、width、height、display、position - ⚠️ 有条件支持：
background-color在 Chrome/Firefox 中有效，Safari 16.4+ 才稳定，旧版 Safari 会忽略
实际写法与兼容性兜底
直接写 p::first-line { font-weight: bold; color: #d35400; } 即可，无需额外修饰。但要注意：IE 完全不支持 ::first-line，Edge 12–18 仅支持单冒号语法 :first-line，而现代浏览器已统一要求双冒号。
立即学习“前端免费学习笔记（深入）”；
- 如需兼容 IE，只能改用 JS 动态截取首行文本包裹
<span>，但会破坏语义和 SEO - 不要写成
p:first-line（漏掉冒号）或p::first-line span（伪元素不能嵌套选择） - 多个段落共用时，样式会自然继承，无需为每个
p单独加 class
真正容易被忽略的是：首行判定完全依赖渲染结果，不是字符数也不是换行符。哪怕你写了 100 个汉字，只要容器够宽，它仍算作“一行”；反之，一个长单词超宽换行，首行可能只剩一个字母——这时候加粗和变色也会只作用于那一个字母。
