::first-line

版本：CSS3

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

语法:

• ::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。

浏览器支持

例子

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.
.demo1 p::first-line { text-transform: uppercase } 

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

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

p:first-line{
				font-size:2em;
				color:#8a2be2;
				background-color:#afd9ee;
			} 
hello world!
第一行文本
第二行文本

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com