css first line(css ::first-line)伪类介绍与使用
2017-01-18 23:51

::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;
}

效果如下:

firstline.png

firstline2.png

从效果图上可以看出,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;
}


效果如下:

firstline3.png

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

::first-line的兼容性

firstlinecompat.png

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只是用来定义文本样式的,不能用在元素上。对元素样式的定义是无效的。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3162)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1