CSS:first-line选择器如何设置首行样式_调整段落首行缩进和字体-css教程-PHP中文网

CSS:first-line选择器如何设置首行样式_调整段落首行缩进和字体

P粉602998670

发布： 2025-11-30 18:46:31

原创

226人浏览过

:first-line伪元素用于设置块级元素第一行文本的样式，支持字体、颜色、加粗、缩进等效果，常用于中文首行缩进和首行视觉强化，如text-indent、font-weight、color等，注意仅对块级元素生效且受容器宽度影响，响应式中需测试换行变化，现代浏览器兼容性良好。

css:first-line选择器如何设置首行样式_调整段落首行缩进和字体

使用 :first-line 伪元素选择器可以为段落或其他块级元素的**第一行文本**设置独立样式。这个选择器特别适用于控制首行的字体、颜色、加粗或缩进效果，常用于排版美化。

在CSS中，:first-line 伪元素应用于块级元素（如 p、div、h1 等），仅对内容的第一行生效，且受容器宽度影响（即换行后的第二行不会被选中）。

示例：

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

p:first-line {
  text-indent: 2em;
  font-weight: bold;
  color: #d33;
  font-family: "Georgia", serif;
}

登录后复制

上述代码会让每个 <p> 段落的首行缩进两个汉字宽度，文字加粗、变红，并使用衬线字体。

中文排版中，段落首行通常需要缩进两个字符。虽然一般使用 text-indent 直接作用于段落即可，但若只想对首行额外强化缩进或与其他样式组合，可配合 :first-line 使用。

利用 :first-line 可让段落开头更具视觉吸引力，比如首行使用特殊字体、加大字号或改变颜色。

实用例子：

.article p:first-line {
  font-size: 1.1em;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

登录后复制

这段样式会让文章段落的首行略大，字母间距拉宽，并显示为小型大写字母，营造出版质感。

:first-line 是 CSS2 引入的伪元素，在现代浏览器中支持良好。但仍需注意以下几点：

基本上就这些。合理使用 :first-line 能提升文本可读性和设计感，尤其适合文章类页面的精细排版。

以上就是CSS:first-line选择器如何设置首行样式_调整段落首行缩进和字体的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中有哪些命名规范 css中flex-grow属性是什么 css背景中有哪些方法 css中justify-content属性是什么 css中link和@import的区别