深入剖析CSS伪元素用法

本文向大家简单介绍一下CSS伪元素的用法，CSS伪元素用于将特殊的效果添加到某些选择器，这里和大家分享一下first-line伪元素和first-letter伪元素的用法，以及CSS伪元素和CSS伪类的联系。

CSS伪元素

CSS伪元素用于将特殊的效果添加到某些选择器。

CSS伪元素语法：

 
 
 
 
    
  
  
  
  
  1. 选择器:伪元素{属性:值}  
    2. 
  
  
  
  
  2.  
    3.

CSS类也可以与伪元素配合使用：

 
 
 
 
    
  
  
  
  
  1. 选择器.类:伪元素{属性:值}  
    2. 
  
  
  
  
  2.  
    3.

:first-line伪元素

"first-line"伪元素用于向某个选择器中的文字的首行添加特殊样式：

 
 
 
 
    
  
  
  
  
  1. p{font-size:12pt}  
    2. 
  
  
  
  
  2. p:first-line{color:#0000FF;font-variant:small-caps}  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. Sometextthatendsupontwoormorelines
     
    5.

在上面的例子中，浏览器显示根据first-line伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。

提示：CSS伪元素中first-line伪元素仅能被用于块级元素。

提示：下面的属性可以被应用到first-line伪元素。

 
 
 
 
    
  
  
  
  
  1. font属性  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. color属性  
    4. 
  
  
  
  
  4. background属性  
    5. 
  
  
  
  
  5. word-spacing  
    6. 
  
  
  
  
  6. letter-spacing  
    7. 
  
  
  
  
  7. text-decoration  
    8. 
  
  
  
  
  8. vertical-align  
    9. 
  
  
  
  
  9. text-transform  
    10. 
  
  
  
  
  10. line-height  
    11. 
  
  
  
  
  11. clear  
    12.

 

:first-letter伪元素

CSS伪元素中first-letter伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

 
 
 
 
    
  
  
  
  
  1. p{font-size:12pt}  
    2. 
  
  
  
  
  2. p:first-letter{font-size:200%;float:left}  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. Thefirstwordsofanarticle.
     
    5.

输出的效果类似于：

 
 
 
 
    
  
  
  
  
  1. ___  
    2. 
  
  
  
  
  2. |hefirst  
    3. 
  
  
  
  
  3. |wordsofan  
    4. 
  
  
  
  
  4.  
    5.

article.font属性
color属性
background属性
margin属性
padding属性
border属性
text-decoration
vertical-align(仅当float为none时)
text-transform
line-height
float
clear        #p#

CSS伪元素和CSS类

CSS伪元素可以与CSS类配合使用：

 
 
 
 
    
  
  
  
  
  1. p.article:first-letter{color:#FF0000}  
    2. 
  
  
  
  
  2. 文章中的一个段落。
     
    3. 
  
  
  
  
  3.  
    4.

上面的例子会使所有class为article的段落的首字母变为红色。

多重CSS伪元素

多个伪元素可以配合在一起使用：

 
 
 
 
    
  
  
  
  
  1. p{font-size:12pt;}  
    2. 
  
  
  
  
  2. p:first-letter{color:#FF0000;font-size:24pt;}  
    3. 
  
  
  
  
  3. p:first-line{color:#0000FF;}  
    4. 
  
  
  
  
  4. Thefirstwordsofanarticle
     
    5. 
  
  
  
  
  5.  
    6.

输出的效果类似于：

 
 
 
 
    
  
  
  
  
  1. __  
    2. 
  
  
  
  
  2. |hefirst  
    3. 
  
  
  
  
  3. |wordsofan  
    4. 
  
  
  
  
  4.  
    5.

article.在上面的例子中，段落的首字母将是字号为24pt的红色。首行的其余部分将会是蓝色，而段落的其余部分会是默认的颜色。

CSS2-:before伪元素

CSS伪元素中before伪元素可用于在某个元素之前插入某些内容。

下面的样式会在标题之前播放音频：

 
 
 
 
    
  
  
  
  
  1. h1:before  
    2. 
  
  
  
  
  2. {  
    3. 
  
  
  
  
  3. content:url(beep.wav)  
    4. 
  
  
  
  
  4. }  
    5. 
  
  
  
  
  5.  
    6.

CSS2-:after伪元素

CSS伪元素中after伪类可用于在某个元素之后插入某些内容。

下面的样式会在标题之后播放音频：

 
 
 
 
    
  
  
  
  
  1. h1:after  
    2. 
  
  
  
  
  2. {  
    3. 
  
  
  
  
  3. content:url(beep.wav)  
    4. 
  
  
  
  
  4. }  
    5. 
  
  
  
  
  5.  
    6.

CSS伪元素

浏览器支持：IE:InternetExplorer,F:Firefox,N:Netscape。

W3C：“W3C”列的数字显示出属性背景由哪个CSS标准定义（CSS1还是CSS2）。

网页题目：深入剖析CSS伪元素用法
转载注明：http://www.shufengxianlan.com/qtweb/news21/454921.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

标签优化知识

行业网站建设

服务器租凭　　 　郫县明安消防器材　　 　成都富士康招工　　 　犀浦防护栏定制　　 　域名ssl证书　　 　卖链接　　 　微信公众号开发　　 　成都封阳台　　 　手机网站　　 　四川國際商會　　 　成都广告公司　　 　成都二枢机房　　 　高端网站定制　　 　成都小程序开发　　 　LED亮化工程　　 　成都网站设计公司　　 　成都网络营销公司　　 　成都网页设计　　 　格蓝特设备　　 　珉田数据中心