码迷,mamicode.com
首页 > 其他好文 > 详细

伪元素选择器

时间:2017-09-04 13:12:15      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:效果   content   第一个   构造   动态   style   包含   first   文本   

就像伪类为锚指定幻想类一样,伪元素能够在文档中插入假想的元素,从而得到某种效果。设置首字母样式、设置第一行样式、设置之前和之后的元素的样式。

 

第一个伪元素用于设置一个块级元素首字母的样式,而且仅对该首字母设置样式:p:first-letter{color:red;}

如果让每个H2中第一个字母的大小是标题中其余字母大小的两倍:h2:first-letter{font-size:200%;}

这个规则会导致用户代理对一个假想的元素作出相应,这个假想元素包含灭个h2中得第一个字母。;first-letter样式只应用到上例所示假想元素的内容。这个h2:first-letter元素并不出现子啊文档源代码中。相反,它是由用户代理动态构造的,用于向相应文本块应用:first-letter样式。换句话说,h2:first-letter是一个伪元素。要记住,不必增加任何新标记。这会由用户代理完成。

类似地,:first-line可以用来影响元素中第一个文本行。这个样式应用于每一段所显示的第一行文本。不论显示区域多大或多小,都是如此。如果第一行只包含该段的5个词,那么只有这5个词会变成紫色。如果一行包含了元素的前30个词,那么所有这30个词都会是紫色。

 

假设想设置一种排版效果,在每个h2元素前加一对银色中括号:h2:before{content:”}}”;color:silver;}

伪元素用于插入生成的内容,并设置其样式。要在一个元素后面插入内容,可以使用伪元素:after.可以在文档的最后用一个适当的结束语结束。body:after{content:” The End.” ;}所生成的内容是一个单独的主体。

伪元素选择器

标签:效果   content   第一个   构造   动态   style   包含   first   文本   

原文地址:http://www.cnblogs.com/wlxll/p/7472994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!