CSS 选择器 :first-line

简介

:first-line 是一种伪元素选择器，用于选择一个元素的第一行文本，并对其应用样式。它常用于对段落的首行进行特殊格式化，如改变字体大小、颜色等。

使用场景

:first-line 选择器非常适合用于创建具有视觉吸引力的排版效果，例如为文章的首行添加特殊的样式来吸引读者的注意力。这种选择器在新闻网站、博客和电子书等场合非常常见。

语法

selector::first-line {
  /* 属性声明 */
}

这里 selector 可以是任何有效的 CSS 选择器，如标签名、类名或 ID 等。:first-line 是伪元素，因此在使用时需要在冒号后面再加一个冒号（::），这与一些旧的伪类选择器有所不同（如 :hover 或 :active），它们只需要一个冒号。

示例

HTML

<p class="article-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius ligula ac turpis malesuada, vel pharetra nisl bibendum.</p>

CSS

.article-intro::first-line {
  font-size: 1.5em;
  color: #ff6347; /* Tomato */
  font-weight: bold;
}

上述代码将使 .article-intro 类的第一个文本行的字体大小变为 1.5 倍，颜色变为番茄色，并且加粗显示。

支持情况

:first-line 选择器在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge 等。然而，在使用这些选择器时，仍然需要注意兼容性问题，尤其是在处理较旧版本的浏览器时。

注意事项

• :first-line 选择器只能应用于块级元素，如 <p>、<div> 等。
• 如果一个元素同时设置了 word-spacing、letter-spacing 或 text-decoration 属性，那么这些属性不会影响到 :first-line 选择器的效果。
• :first-line 选择器不能与其他伪元素（如 ::before 或 ::after）一起使用。
• 要注意，由于 :first-line 是一个伪元素，所以不能直接为其指定背景颜色或图像，因为这些属性不适用于文本行。

通过合理地运用 :first-line 选择器，可以极大地提升网页的视觉效果，使其更具吸引力。在设计时，建议结合实际需求灵活使用此选择器，以达到最佳的设计效果。