当前位置：文江博客知识库简体中文文档 Web CSS first-linegRw

::first-line (:first-line) - CSS（层叠样式表）编辑

::first-line CSS pseudo-element （CSS伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的伪元素一样，::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, and font-family
color
所有和背景有关的属性： background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
word-spacing, letter-spacing, text-decoration, text-transform, and line-height
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

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

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

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

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

语法

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

示例

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	Status	Comment
CSS Pseudo-Elements Level 4 ::first-line	Working Draft	Defined more strictly where it can occur. Generalized allowed properties to typesetting, text decoration and inline layout properties and `opacity` Defined the inheritance of `::first-letter`.
CSS Text Decoration Module Level 3 text-shadow with ::first-line	Candidate Recommendation	Allowed the usage of `text-shadow` with `::first-letter`.
Selectors Level 3 ::first-line	Recommendation	The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.
CSS Level 2 (Revision 1) ::first-line	Recommendation	No significant change, though CSS Level 2 still used the one-colon syntax.
CSS Level 1 ::first-line	Recommendation	The initial definition used the one-colon syntax.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 (buggy when using `text-transform`: issue 129669)	1.0 (1.7 or earlier)	9.0	7.0	1.0 (85) (buggy when using `text-transform`: issue 3409)
Old one-colon syntax (`:first-line`)	1.0 (buggy when using `text-transform`: issue 129669)	1.0 (1.7 or earlier)	5.5	3.5	1.0 (85) (buggy when using `text-transform`: issue 3409)