使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，这里不怎么写具体的实例，详细的应用后续我会做出详细的总结。
伪类的定义：
伪元素的定义：CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：CSS伪类是用来添加一些选择器的特殊效果。
哈哈，除了伪类和伪元素不同，其他的好像都一样，所以它们俩的有区别吗，到底有什么区别，嗯、下面我们就来看看
selector:pseudo-element {property:value;}伪类的语法：
selector:pseudo-class {property:value;}CSS3中的标准是伪类使用单冒号“:” 。而伪元素使用双冒号“::”（避免混淆） 、但是在此之前无论是伪类还是伪元素都使用单冒号“:” 所以为了保证兼容伪元素两种使用方法都是可以的 、但是低版本IE有双冒号兼容问题 、所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号 、导致这种混淆一直延续下来
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id，class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类
伪元素，是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此他的动态性比伪类要低的多。实际上，设计伪元素的目的就是去选取诸如元素内容的第一个字母，第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪类与伪元素的区别与联系
在计算权重的时候 ：伪类与类优先级相同 、伪元素与标签优先级相同
伪类与伪元素都是用于向选择器加特殊效果伪类与伪元素的本质区别就是是否抽象创造了新元素伪类只要不是互斥可以叠加使用伪元素在一个选择器中只能出现一次，并且只能出现在末尾伪类与伪元素优先级分别与类、标签优先级相同伪元素使用时的注意事项
1、伪元素如果没有设置content属性，那么伪元素是无用的（可以将伪元素的内容设置为空）
2、插入的内容在页面的源码里是不可见的，只能在css里面可见
3、插入的伪元素默认情况是内联元素，因此，为了给插入元素赋予高度，外边距、填充等等，必须显式定义它是一个块级元素。
4、典型的css继承规则适用于插入的伪元素，比如，插入的字体系列，然后伪元素会像其他元素一样继承这些字体系列，同样的，伪元素不会继承没有自然继承自父元素（如padding和margin）的样式。
5、使用伪元素插入非文本内容
我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。伪元素的content也可以包含除文本外，另两个额外的值
首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的
注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。
你还可以选择ATRR(X)中的函数的形式。此功能，根据规范?，“把X属性的值以字符串的形式返回”
下面是一个例子：
上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。
你也可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的
然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，所以它在这个列子中不可用，同样也适用于其他空元素，例如：<input>。
可怕的浏览器兼容性
任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。
浏览器支持:before 和 :after 伪元素栈，像这样：
Chrome 2+,Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),在IE8中运行，必须声明 <!DOCTYPE> 。
几乎所有的移动浏览器。
唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。
一些提醒
正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
一些内容参考http://www.jb51.net/css/332483.html