::first-line

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

::first-line 伪元素用于为元素的第一行应用样式。 想象一个包含多行文本的段落(就像这一个!)。 ::first-line 允许您为该文本的第一行设置样式。 您可能使用它来使其更大或将其设置为小型大写字母作为一种风格选择。 此伪元素所针对的文本量取决于行长、视窗宽度、字体大小、字母间距、字间距等几个因素。 一旦换行,之后文本将不再被选中。 请注意,这里没有选择实际的 DOM 元素(因此称为“伪”元素)。

此伪元素仅适用于块级元素(当 display 设置为 blockinline-blocktable-captiontable-cell 时)。 如果将其设置在内联元素上,则不会发生任何情况,即使该内联元素包含换行符。

另外请注意,并非所有属性都可以在包含 ::first-line 的规则集中使用。 主要

.element::first-line {
    font-style: ...
    font-variant: ...
    font-weight: ...
    font-size: ...
    font-family: ...

    line-height: ...
    color: ...
    word-spacing: ...
    letter-spacing: ...
    text-decoration: ...
    text-transform: ...

    background-color: ...
    background-image: ...
    background-position: ...
    background-repeat: ...
    background-size: ...
    background-attachment: ...
}

官方 CSS 规范 告诉用户代理可以根据需要允许其他属性

用户代理也可能应用其他属性。

关于特异性的说明

以下演示展示了 ::first-line 如何能够覆盖任何类型的特异性,甚至是 !important

  • 第一个段落通过标签选择器设置为灰色
  • 第二个段落通过类选择器设置为灰色
  • 第三个段落通过 ID 选择器设置为灰色
  • 第四个段落通过 !important 命令设置为灰色

这是因为伪元素被视为子元素,而不仅仅是父元素的一部分。 因此,您对其应用的规则仅针对它,父规则可能对其进行级联。

另外,尝试调整浏览器大小以查看视窗宽度改变时伪元素的行为。

即使 那将很酷,也不存在 :last-line 或 :nth-line。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
93.59125.1

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712735.0-5.1

更多信息