::first-line | CSS属性参考

08-28 次

标签 css教程 css属性伪元素

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;
}

在线演示

下面的例子会将文字的第一行设置为Crimson Text字体，字体大小为2em，颜色为红色。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.