::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属性能被使用：

所有和字体有关的属性：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，color
所有和背景有关的属性：background-color，background-clip，background-image，background-origin，background-position，background-repeat，background-size， background-attachment，background-blend-mode
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.

在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!

第一行文本

第二行文本