标签：
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。
下面就这句话给出例子
伪类 ：first-child
<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>
使用伪类选出第一个段落
div p:first-child{background-color:orang;}
如果我们不使用伪类也要达到相同的效果，那么我们可以这样做过：给第一个段落添加一个类选择器
<div>
<p class="first">我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>
然后设置类选择器的样式
.first{background-color:orange;}
伪元素：first-letter
<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>
现在我们使用伪元素设置div下所有p元素的第一个字母的颜色
div p:first-letter{color:red;}
如果我们不使用伪元素也想达到同样的效果，那么就需要插入新的标签元素
<div>
<p><span>我</span>是一个段落</p>
<p><span>我</span>是一个段落</p>
<p><span>我</span>是一个段落</p>
<p><span>我</span>是一个段落</p>
<p><span>我</span>是一个段落</p>
<div>
然后设置样式
div p span{background:color;}
总结：
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
标签：
原文地址：http://www.cnblogs.com/luoyicom/p/5700364.html
