:before 和 :after 的内幕 以及伪类

:before 和 :after 的内幕


:before 和 :after 的内幕 以及伪类_第1张图片


伪类 VS 伪元素

:before 和 :after 的内幕 以及伪类_第2张图片

这两个概念很容易混淆,即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单,如下:


伪类:作用对象是整个元素

首先,来看几个伪类

?
a:link { color : #111 }
a:hover { color : #222 }
div:first-child { color : #333 }
div:nth-child( 3 ) { color : #444 }


如你所见,尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。


伪元素:作用于元素的一部分

还是来看几个例子:

?
p::first-line { color : #555 }
p::first-letter { color : #666 }
a::before {content : "hello world" ;}


如你所见,伪元素作用于元素的一部分:一个段落的第一行 或者 第一个字母。

更加神奇的是可以作用于并未加入HTML的对象,这就是:before 和 :after,也就是本文要说的内容。


:before VS ::before

:before 和 :after 的内幕 以及伪类_第3张图片

为什么有两种写法呢?它们的效果一样么?


答案是一样的,来看一个例子:

?
/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
  
/*CSS3*/
.example::before {}
.example::after {}
.example:first-child {}


在CSS2中,我们使用一个冒号表示伪类和伪元素。然而,为了区别已有的这两个,CSS3专门为伪元素设计了两个冒号。


IE再次毁了一切

所有现代浏览器都支持 :: 语法,但是悲剧的IE8不支持,大多数开发者为了兼容IE,使用CSS2的 :。为了保持简单一致,本文后面的部分都是用CSS2格式。


什么是 :before 和 :after

:before 和 :after 的内幕 以及伪类_第4张图片

:before 和 :after 使你可以通过CSS加入一些内容,从而避免了HTML的凌乱。特别是一些装饰性的元素,从语义化考虑本就不该出现在HTML中。


举个例子,你的网站有一些电话号码,你希望在它们前面加一个icon ☎。你可以用 :before 伪元素实现这个效果:

?
.phoneNumber:before {
     content : "☎" ;
     font-size : 15px ;
}

  

 这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样,你可以猜到会出现什么效果了

?
.phoneNumber:after {
     content : "$#9742" ;
     font-size : 15px ;
}



--------------------------------------------------------------------------------
一个简洁的例子

:before 和 :after 的内幕 以及伪类_第5张图片

最近,:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。


来看一个例子,这是一个简单的按钮,圆形并有红色的渐变。

?
.button {
     height : 100px ;
     width : 100px ;
     position : relative ;
     margin : 50px ;
     color : white ;
     text-align : center ;
     line-height : 100px ;
 
     /*Rounded Corners and Shadows*/
     -webkit-border-radius: 100px ;
     -moz-border-radius: 100px ;
     border-radius: 100px ;
     -webkit-box-shadow: 2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     -moz-box-shadow: 2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     box-shadow: 2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
 
     /*Ridiculous Gradient Syntax*/
     background : #e51d16 ; /* Old browsers */
     background : -moz-linear-gradient( top #e51d16  0% , #b21203  100% ); /* FF3.6+ */
     background : -webkit-gradient(linear, left  top , left  bottom , color-stop( 0% , #e51d16 ), color-stop( 100% , #b21203 )); /* Chrome,Safari4+ */
     background : -webkit-linear-gradient( top #e51d16  0% , #b21203  100% ); /* Chrome10+,Safari5.1+ */
     background : -o-linear-gradient( top #e51d16  0% , #b21203  100% ); /* Opera 11.10+ */
     background : -ms-linear-gradient( top #e51d16  0% , #b21203  100% ); /* IE10+ */
     background : linear-gradient( top #e51d16  0% , #b21203  100% ); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#e51d16' , endColorstr= '#b21203' ,GradientType= 0  ); /* IE6-9 */
}


效果如下:

:before 和 :after 的内幕 以及伪类_第6张图片


现在,我们需要在按钮的外围添加一层稍暗的区域,并且给它一个内阴影效果,看起来就像是嵌入的一样。这次,我们不用添加额外的标签,只需要用一个空的伪元素。

?
.button:before {
     content : "" ;
}


现在我们开始实现想要的效果。

?
.button:before {
     content : "" ;
     width : 100% ;
     height : 100% ;
     display : block ;
     z-index : -1 ;
     position : relative ;
     padding : 15px ;
     background : #ddd ;
     left : -15px ;
     top : -15px ;
     -webkit-border-radius: 100px ;
     -moz-border-radius: 100px ;
     border-radius: 100px ;
     -webkit-box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     -moz-box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
}


现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1,使它位于按钮的下方,并且使用相对定位校正位置。


接下来,我们又想加一层同样的效果。这一次,我们使用 :after

?
.button:after {
     content : "" ;
     width : 100% ;
     height : 100% ;
     display : block ;
     z-index : -2 ;
     position : relative ;
     padding : 25px ;
     background : #eee ;
     position : absolute ;
     left : -25px ;
     top : -25px ;
     -webkit-border-radius: 100px ;
     -moz-border-radius: 100px ;
     border-radius: 100px ;
     -webkit-box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     -moz-box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
     box-shadow: inset  2px  2px  4px  rgba( 0 , 0 , 0 , 0.4 );
}


效果如下: 

:before 和 :after 的内幕 以及伪类_第7张图片


通过 :before 和 :after 你还能做什么?

使用很广泛,下面给出几个比较流行的例子

 

清除浮动

CSS的浮动很让人头痛,世界各地的开发者都在寻找更好的解决方法。


Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个,即利用 :before 和 :after 清除浮动。

?
/* 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则用于清除浮动,这种方法做的极为干净漂亮。


你也许会说还有 overflow: hidden; 方式呢!当然这也是一种可选方案,当你发现overflow不合适的时候,可以选择这里提到的方式。


CSS图形

:before 和 :after 的内幕 以及伪类_第8张图片

使用纯CSS实现某些复杂的图形是不是很有趣?通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。


CSS3Shapes.com 有很多例子,这里就举一个八边形的例子。

?
#octagon {
    width : 100px ;
    height : 100px ;
    background : blue ;
}
  
#octagon:before {
    height : 0 ;
    width : 40px ;
    content : "" ;
    position : absolute ;
    border-bottom : 30px  solid  blue ;
    border-left : 30px  solid  white ;
    border-right : 30px  solid  white ;
}
  
#octagon:after {
    height : 0 ;
    width : 40px ;
    content : "" ;
    position : absolute ;
    border-top : 30px  solid  blue ;
    border-left : 30px  solid  white
    border-right : 30px  solid  white ;
    margin : 70px  0  0  0 ;
}


可以看到,通过定位、设置border,我们就能把一些简单的形状组合成复杂的图形,相当的酷!


如果你还没过瘾,可以在 awesome roundup of possible applications  找到更多的酷东东

你可能感兴趣的:(web,css,safari,图形,chrome,border,ie)