如何用css选择器选中第一行文字样式-css教程-PHP中文网

如何用css选择器选中第一行文字样式

P粉602998670

发布： 2025-10-04 19:10:02

原创

571人浏览过

使用::first-line伪元素可选中块级元素第一行文本并设置字体、颜色等样式，如p::first-line{font-weight:bold;color:blue;}，但仅适用于块级元素且不支持布局属性。

如何用css选择器选中第一行文字样式

在CSS中，并没有直接选择“第一行文字”的通用选择器，但可以通过特定的伪元素来实现对块级元素中第一行文本样式的控制。最常用的方式是使用 ::first-line 伪元素。

::first-line 可以选中块级元素（如 div、p、h1 等）中的第一行文本，并为其设置样式。这个伪元素只作用于第一行，且仅当该元素是块级容器时才有效。

示例：

p::first-line {
  font-weight: bold;
  color: blue;
  font-size: 1.2em;
}

登录后复制

上面的代码会让段落 p 中的第一行文字加粗、变蓝并放大字体，而其余行保持原样式。

微软文字转语音

微软文本转语音，支持选择多种语音风格，可调节语速。

这种技术常用于文章排版，比如让段落首行突出显示，提升可读性：

.article p::first-line {
  font-variant: small-caps;
  letter-spacing: 1px;
}

登录后复制

基本上就这些。只要理解 ::first-line 的作用机制和限制，就能很好地控制第一行文字的呈现效果。不复杂但容易忽略细节。

以上就是如何用css选择器选中第一行文字样式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：