伪类，伪元素区别

本文主要是介绍伪类，伪元素区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

:before 和 :after 的内幕

伪类 VS 伪元素

这两个概念很容易混淆，即使你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

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

答案是一样的，来看一个例子：

 ? 
 /*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 使你可以通过CSS加入一些内容，从而避免了HTML的凌乱。特别是一些装饰性的元素，从语义化考虑本就不该出现在HTML中。

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

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

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

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

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

最近，: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 */ 
 } 

效果如下：

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

 ? 
 .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 你还能做什么？

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

清除浮动

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图形

使用纯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 ; 
 } 