Heim  >  Artikel  >  Web-Frontend  >  css伪类,伪元素_html/css_WEB-ITnose

css伪类,伪元素_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:511180Durchsuche

伪类作用于整个元素,比如:

a:link{color:#111;}                                 

a:hover{color:#222;}                              

div:first-child{color:#333;}

尽管这些条件都不是基于Dom的,但结果没一个都是作用于一个完整的元素,比如整个链接,段落,div等等;

 

伪元素作用于元素一部分,比如:

p::first-line{color:#555;}

p::first-letter{color:#666;}

伪元素作用于元素的一部分,一个段落的第一行或者第一个字母;

 

:before于::before作用一样,前者是css2的写法,后者是css3的写法

 

作用一:

:before和:after可以增加纯css设计的复杂度,不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。比如想在电话号码字体前面加上一个电话的icon图标,我们就可以这样做:

.phoneNumber:before {

     content : "☎" ;

     font-size : 15px ;

}

作用二:

清除浮动

/* For modern browsers */

.cf:before, .cf:after {

     content : "" ;

     display :table;

}   

.cf:after {

     clear : both ;

/* For IE 6/7 (trigger hasLayout) */

.cf {

     zoom: 1 ;

}

这里 :before 阻止了 top-margin 合并, :after则用于清除浮动

 

 

 

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn