css ::first-letter(css :first-letter)伪类的讲解
2017-01-19 00:33

first-letter的介绍

::first-letter伪类是css2的一个样式,用来改变元素中第一个字符的样式,可以用在首字突出等效果上。::first-letter伪类只能用在display为block,inline-block,table-cell,list-item,table-caption的元素上才有效果,在其他元素上使用是没有效果。

first-letter的使用

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

}
.pseudo_cont::first-letter{
    color:#C91010;
    font-size:18px;
    font-weight:bold;
    margin-right:20px;
    margin-left:20px;
}

效果如下:

firstletter.png

first-letter不像::first-line伪类那样,有好多样式(margin-left等)不能使用。::first-letter伪类几乎可以使用任何样式,它都是支持的。从上面的效果图可以看出,margin-left,margin-right是起作用了。

::first-letter还多了一个应用场景,那就是list-item。

.pseudo_ul{
   margin:0;
    padding:0;
}
.pseudo_ul li{
    margin:20px;
    padding:20px;
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    line-height:26px;
}
.pseudo_ul li:first-letter{
    font-size:18px;
    color:#221396;
    border:1px solid #0C58A7;
    box-shadow:1px 1px 2px #000;
    margin-right:12px;
}

<ul class="pseudo_ul">
    <li>妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
    <li>妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
    <li>妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
</ul>

效果如下:

first-letter2.png

可以看出,特意没有去掉li的list-style样式,::first-letter的效果并没有体现在list-style前面的小圆点上,而是体现在li中文本的第一个文字上,::first-letter效果不知体现了颜色,大小,margin,就连边框,text-shadow的效果也体现出来了。

对于一些quotes字符,::first-letter并不认为他是一个有效字符,而是连带它和第一个有效字符一起设置效果。

<ul class="pseudo_ul">
    <li>"妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
    <li>《妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
    <li>#妹纸前端欢迎您,您的阅读支持是我写作的动力。</li>
</ul>

我们在li的开始处添加了quotes引用字符,效果如下:

firstletter2.png

::first-letter连带quotes符号和第一个字符一起添加上了效果。所以如果我们期望的不是这种效果,一定要注意首字符不要是quotes引用字符。

:first-letter兼容性

firstlettercompat.png

跟first-line的兼容性一样的。如果用css2的一个冒号的伪类写法,所有浏览器都是兼容的。采用CSS3的两个冒号写法的first-letter也能兼容到IE9浏览器。使用first-letter字符我们可以实现首行缩进的效果,首行缩进用first-line伪类是实现不了的,因为first-line不支持设置margin都元素样式。


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