::first-line伪类介绍

::first-line是一个伪类样式，用来定义块状元素中的第一行文本的特殊样式。::first-line只有用在block，inline-block,table-cell,table-caption块状元素上才能有效果，在其他元素上是没有效果的。

::first-line使用

.pseudo_cont{
    margin:20px;
    padding:20px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:13px;
    line-height:26px;
    color:#353535;
}
.pseudo_cont::first-line{
    color:#C91010;
    font-size:15px;
    font-weight:bold;
}

效果如下：

从效果图上可以看出，first-line伪类可以定义文本中第一行文本的特殊样式，并且具有自适应效果，随着浏览器的大小的改变，第一行文本的字数会增加或减小，而first-line伪类的效果会根据浏览器的改变，自适应把特殊样式应用到在第一行的文本上。

::first-line和 :first-line两种写法都是伪类的写法，第一种的两个冒号的写法是W3C推荐的规范写法，但是如果想要兼容一些古董浏览器，伪类的写法采用一个冒号的写法，能最大程度的兼容更多的浏览器。

我们把上面元素的display改为flex，代码如下：

.pseudo_cont{
    margin:20px;
    padding:20px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:13px;
    line-height:26px;
    color:#353535;
    display:flex;
}
.pseudo_cont::first-line{
    color:#C91010;
    font-size:15px;
    font-weight:bold;
}

效果如下：

因为flex已经不是上面提到的几种display状态（block，inline-block,table-cell,table-caption），所以用在flex元素上的first-line伪类是不起作用的。如果平时使用::first-line伪类出现不起作用的情况，首先要检查元素display状态是否是起作用的几种状态之一。

::first-line的兼容性

first-line的两个冒号的写法兼容到IE9浏览器，一个冒号的写法能兼容到IE5.5。兼容性十分良好，尤其是它能自适应第一行文字的变化，可以应用在移动端页面中。

::first-line结语

::first-line中定义的样式不是能使用所用样式，而是只能使用font-size,font-family，color,background,word-spacing,text-shadow等属性，而对于比如margin-left,position,left,top等样式是不起作用的。::first-line只是用来定义文本样式的，不能用在元素上。对元素样式的定义是无效的。