DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
::first-line
伪元素用于为元素的第一行应用样式。 想象一个包含多行文本的段落(就像这一个!)。 ::first-line
允许您为该文本的第一行设置样式。 您可能使用它来使其更大或将其设置为小型大写字母作为一种风格选择。 此伪元素所针对的文本量取决于行长、视窗宽度、字体大小、字母间距、字间距等几个因素。 一旦换行,之后文本将不再被选中。 请注意,这里没有选择实际的 DOM 元素(因此称为“伪”元素)。
此伪元素仅适用于块级元素(当 display
设置为 block
、inline-block
、table-caption
或 table-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,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
9 | 3.5 | 9 | 12 | 5.1 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 3 | 5.0-5.1 |
Chrome 中有一个非常恼人的错误,它会阻止 text-transform: uppercase 在 ::first-line 上生效。
https://code.google.com/p/chromium/issues/detail?id=129669
https://code.google.com/p/chromium/issues/detail?id=142827
你可能想把它添加到文章中,因为它是一个非常古老的错误(从 Chrome 3 或更早版本开始就存在),而且 Chrome 团队似乎没有人跟踪它。
这真是令人难以置信。这个错误已经存在多久了,而且完全没有尝试修复吗?
我知道这并不理想,但在他们修复这个错误之前,我发现这是一种有用的解决方法
font-variant: small-caps;
正如我所说,并不理想,但它对一些我参与的项目来说已经足够了。
这个库帮助了我 http://zencode.in/lining.js/ .. 似乎有点过度,但它有效。
GoogleChrome 没有人关心它。:-) 你仍然可以使用 span 或其他东西来实现想要的效果。
并非如此。因为 ::first-line 独立于 HTML 标记,因此它比 span 标签更适合流畅的布局,而 span 标签假设此处的这个词绝对是文本行上的最后一个词。
是的,Chrome / WebKit 中的这个错误很糟糕,而且很持久,而且无法解释。我从未想过我会这么说,但 Chrome 真的需要在这里赶上 IE。
2016 年快要结束了,这个 Chrome 错误仍然存在。Chromium 是新的 IE。
值得注意的是,我刚刚了解到 Firefox(在撰写本文时为 v41.0.1)不允许 :first-line 将行高设置为低于元素当前设置的值。
显然这并不一定是一个错误,因为规范将此留给浏览器解释,但其他所有浏览器(Chrome、Safari、IE)都按预期执行。
这是我遇到的另一个
::first-line
错误(以及修复方法)