::first-line伪元素用于设置块级元素首行文本样式，如p::first-line可定义字体、颜色、文本缩进等，适用于段落美化，但不支持布局属性修改，需注意仅作用于块级元素且受容器宽度影响，现代浏览器兼容性良好。
在CSS中，::first-line 伪元素可以用来选中块级元素中第一行的文本，并为其单独设置样式。这个功能特别适合用于美化文章段落的首行，比如在杂志排版或博客中突出段落开头。
基本语法与使用方式
::first-line 只能应用于块级容器中的第一行文本，常见于 p、div、h1-h6 等块级元素。它的基本写法如下：
p::first-line {
font-weight: bold;
color: #d40;
}
这段代码会让所有 p 标签的第一行文字加粗并变为橙色。
可设置的样式属性
通过 ::first-line，你可以修改多种文本相关的CSS属性，包括：
立即学习“前端免费学习笔记（深入）”；
用于构建、编译或部署 WebAssembly HTTP 应用到 Gcore FastEdge 边缘计算——触发关键词为“deploy to FastEdge”“build a FastEdge app”“Wasm on the edge”“Gcore edge function”、上传 .wasm 文件或使用 fastedge Rust SDK。
- 字体相关：font-family、font-size、font-weight、font-style
- 颜色与背景：color、background-color、text-shadow
- 文本格式：text-transform、letter-spacing、word-spacing、line-height
注意：不能通过它改变元素的布局属性，如 margin、padding 或 display。
实际应用场景示例
假设你想让文章段落的首行缩进两个字符，并将首行文字变小且斜体，可以这样写：
p::first-line {
font-size: 0.9em;
font-style: italic;
text-indent: 2em;
}
这能让段落看起来更优雅，尤其适合长文阅读场景。
注意事项与兼容性
::first-line 在现代浏览器中支持良好，包括 Chrome、Firefox、Safari 和 Edge。但需注意以下几点：
- 只能用于块级元素，内联元素（如 span）无效
- 首行范围由当前布局决定，如果发生换行，只作用于视觉上的第一行
- 在浮动或弹性布局中，首行判断可能受容器宽度影响
- 建议避免在复杂嵌套结构中依赖其行为
基本上就这些。合理使用 ::first-line 能提升页面的排版质感，不复杂但容易忽略。
