CSS ::first-line伪元素详解

::first-line伪元素不会选择内联元素的第一行文字。也就是说，::first-line属性对于display: inline的元素无效，它只对display属性为block、inline-block、table-cell、table-caption或list-item的元素有效。

一段文字的第一行是多少个字，取决于页面的宽度和字体大小等各种因素。

如果是在一个块级元素（如<div>）中包含一段文本（如<p>元素），那么<div>元素的::first-line匹配的是<p>元素的第一行。

<div>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

display为table-cell或inline-block的元素的第一行不能作为其父元素的第一行。所以下面的例子中，<div>元素的第一行不是first。

<div>
   <p style="display: inline-block">
       first
       <br>
       section
   </p>
   third
</div>

考虑以下的一段文本，如果在文本之前使用了<br>换行符，那么::first-line将不会选择任何东西。

<p><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

可以用来修饰 ::first-line 的CSS属性

只有一部分的CSS属性可以用来修饰::first-line属性，它们是：

字体属性：font、font-style、font-variant、font-weight、font-size、line-height和font-family。

背景属性：background、background-color、background-image、background-position、background-repeat、background-size和background-attachment。

text-decoration、text-transform、letter-spacing和word-spacing。

关于:和::的区别

在别人书写的CSS代码中，你可能经常看到有人使用:first-line作为伪元素，而有一些人则使用::first-line作为伪元素。它们之间有什么区别呢？

在CSS1和CSS2规范中，伪元素通过一个冒号:来定义，例如:hover。在CSS3规范中，使用双冒号::语法来表示伪元素（pseudo-elements），以区别于伪类（pseudo-classes）。

/* 旧的CSS2语法 */

.element:first-line {

   /*  */

}

/* 新的CSS3语法 */

.element::first-line {

   /*  */

}

只要是支持双冒号语法的浏览器都支持单冒号语法。IE8不支持双冒号语法，如果你要支持IE8浏览器，建议使用单冒号语法。

示例代码

下面的代码为段落的第行设置一些样式。

p::first-letter {
 font-family: "Crimson Text";
 font-size:2em;
 color:red;
}

浏览器支持

支持双冒号语法的::first-line伪元素的浏览器有：Chrome, Firefox, Safari, Opera, Internet Explorer 9+ 以及 Android 和 iOS。

双冒号语法是CSS3的语法，IE8浏览器不支持双冒号的语法，仅支持单冒号的:first-letter语法。