1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 选择器
  5. ::first-line (:first-line)

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

::first-line (:first-line)

基线
广泛可用
*

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

::first-line CSS 伪元素在区块容器的第一行应用样式。

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中，所以，::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。

允许的属性值

在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分 css 属性能被使用：

这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。

备注：在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器，那么 :first-line 是唯一的选择，反之，更推荐使用 ::first-line。

语法

css
::first-line {
  /* ... */
}

示例

text-transform

将每个段落中的第一行字母转换成大写

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-transform: uppercase;
}

输出

margin-left

margin-left 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  margin-left: 20px;
}

输出

text-indent

text-indent 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-indent: 20px;
}

输出

规范

规范
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题