::first-line

版本： CSS3

CSS伪元素 ::first-line 在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。和其他所有的伪元素一样， ::first-line 不能匹配任何真实存在的html元素。 ::first-line 伪元素只能在块容器中，所以 ::first-line 伪元素只能在一个 display 值为 block , inline-block , table-cell 或者 table-caption 中有用。在其他的类型中， ::first-line 是不起作用的.

语法:

E :: first-line { sRules }
  • ::first-line 选择器用来指定选择器第一行的样式，它生成包含元素的第一个格式化行的伪元素。
  • ::first-line 样式表示元素中的第一行文本，无论该行中可能出现多少个词。
  • ::first-line 只能附加到块级元素。内联对象要使用该伪对象，必须先将其设置为块级对象。可以应用到首字母的属性是有限的。
  • ::first-line 是CSS3新版的写法，以前版本的写法是 :first-line 。新版是双冒号 :: ，旧版是单个冒号 :: 。

允许的属性值

在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分css属性能被使用：

在CSS 2中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在CSS 2.1中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过CSS 2的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器，那么 :first-line 是唯一的选择，反之，更推荐使用 ::first-line 。

浏览器支持

IE9+以及新版浏览器都支持 ::first-line

例子

将每个段落中的第一行字母转换成大写 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.</p>

<style>
.demo1 p::first-line { text-transform: uppercase }
</style>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.

margin-left 在 first-line 伪元素上无效 

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>
</div>
<style>
.demo2 div { background:#ccc; }
.demo2 p::first-line { margin-left: 20px; }
</style>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p:first-line{
				font-size:2em;
				color:#8a2be2;
				background-color:#afd9ee;
			}
		</style>
	</head>
	<body>
	<div>
		<h1>hello world!</h1>
		<p>第一行文本</p>
		<p>第二行文本</p>
	</div>
	</body>
</html>

hello world!

第一行文本

第二行文本

上篇： ::first-letter

下篇： ::before