::first-line (:first-line)

::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属性能被使用:

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

在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! (en-US)

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)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) 未实现 ? ?
Old one-colon syntax (:first-line) ? 1.0 (1) ? ? ?

参见