css :first-line选择器使用详情

css :first-line选择器介绍

css :first-line选择器用于选取块元素的第一行并为其设置css样式。

css :first-line仅作用于块元素。内联元素要使用该选择器，必须先设定height或width属性，或者设定position属性为absolute，或者设定display属性为block。

如果未强制指定元素的width属性，首行的内容长度可能不是固定的。

语法：

:first-line { 
   style properties 
}

如：

p:first-line {font-weight: bold;}/*设置每个段落的第一行文字为加粗*/

css :first-line实例

设置每个段落元素的第一行的样式：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line{
    background-color:yellow;
}
</style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
/* http://www.manongjc.com/article/1314.html */
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

在线运行