::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!

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) ? ? ?

参见

文档标签和贡献者

最后编辑者: maoyumaoxun,