此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
::first-line (:first-line)
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
::first-line CSS 伪元素在区块容器的第一行应用样式。
和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的 html 元素。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中,::first-line 是不起作用的。
允许的属性值
在一个使用了 ::first-line 伪元素的选择器中,只有很小的一部分 css 属性能被使用:
- 所有和字体有关的属性:
font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretch, andfont-family color- 所有和背景有关的属性:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment, andbackground-blend-mode word-spacing,letter-spacing,text-decoration,text-transform, andline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style, andvertical-align.
这个列表将来可能会被扩展,但是推荐的是,你不要使用任何上述没有提到的属性。
备注: 在 CSS 2 中,伪元素是以 : 开头的。由于伪类也遵循同一规则,使得他们之间难以区分。为了解决这个问题,在 CSS 2.1 中,伪元素支持以 :: 开头。现在,使用伪元素时更推荐以 :: 开头,而使用伪类时使用 : 开头。
因为过去的浏览器都实现过 CSS 2 的规则,所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。
如果需要支持老旧的浏览器,那么 :first-line 是唯一的选择,反之,更推荐使用 ::first-line。
语法
Error: could not find syntax for this item示例
text-transform
将每个段落中的第一行字母转换成大写
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
CSS
p::first-line {
text-transform: uppercase;
}
输出
margin-left
margin-left 在 first-line 伪元素上无效
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
CSS
p::first-line {
margin-left: 20px;
}
输出
text-indent
text-indent 在 first-line 伪元素上无效
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
CSS
p::first-line {
text-indent: 20px;
}
输出
规范
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |
浏览器兼容性
Loading...
参见
- The
::first-letterpseudo-element.