::first-line

::first-line伪元素将样式应用于块级元素的第一行。请注意，第一行的长度取决于许多因素，包括元素的宽度，文档的宽度以及文本的字体大小。

::first-line {
  color: blue;
  text-transform: uppercase;
}

只有一小部分css属性可以与::first-line伪元素一同使用：

所有字体相关的属性：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，和font-family

所有的背景相关的属性：background-color，background-clip，background-image，background-origin，background-position，background-repeat，background-size，background-attachment，和background-blend-mode

color属性

word-spacing，letter-spacing，text-decoration，text-transform，和line-height

text-shadow，text-decoration，text-decoration-color，text-decoration-line，text-decoration-style，和vertical-align。

CSS3引入了::first-line符号（用两个冒号）来区分伪类和伪元素。在CSS2中引入后，浏览器也接受:first-line。

语法

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

实例

HTML

<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>

<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>

CSS

::first-line {
  color: blue;
  text-transform: uppercase;


  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-classes */
  margin-left: 20px;
  text-indent: 20px;
}

结果

规范

Specification	Status	Comment
CSS Pseudo-Elements Level 4The definition of '::first-line' in that specification.	Working Draft	Defines more strictly where ::first-letter can occur. Generalizes allowed properties to typesetting, text decoration, and inline layout properties and opacity. Defines the inheritance of ::first-letter.
CSS Text Decoration Module Level 3The definition of 'text-shadow with ::first-line' in that specification.	Candidate Recommendation	Allows the use of text-shadow with ::first-letter.
Selectors Level 3The definition of '::first-line' in that specification.	Recommendation	Introduction of the two-colon syntax.
CSS Level 2 (Revision 1)The definition of '::first-line' in that specification.	Recommendation	No change.
CSS Level 1The definition of '::first-line' in that specification.	Recommendation	Initial definition, using the one-colon syntax.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.01	(Yes)	1.0 (1.7 or earlier)	9.0	7.02	1.03
Old one-colon syntax (:first-line)	1.01	(Yes)	1.0 (1.7 or earlier)	5.5	3.52	1.03

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)1	(Yes)	1.0 (1)	No support	?	?
Old one-colon syntax (:first-line)	(Yes)1	(Yes)	1.0 (1)	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18