::first-line是一个伪类样式,用来定义块状元素中的第一行文本的特殊样式。::first-line只有用在block,inline-block,table-cell,table-caption块状元素上才能有效果,在其他元素上是没有效果的。
.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的两个冒号的写法兼容到IE9浏览器,一个冒号的写法能兼容到IE5.5。兼容性十分良好,尤其是它能自适应第一行文字的变化,可以应用在移动端页面中。
::first-line中定义的样式不是能使用所用样式,而是只能使用font-size,font-family,color,background,word-spacing,text-shadow等属性,而对于比如margin-left,position,left,top等样式是不起作用的。::first-line只是用来定义文本样式的,不能用在元素上。对元素样式的定义是无效的。