在学习css的过程中，特别容易搞混淆两个概念：伪类和伪元素。w3c中对两者的定义为：css 伪类用于向某些选择器添加特殊的效果。css 伪元素用于将特殊的效果添加到某些选择器。伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(lvha)。随后css2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。下面就来聊聊css以及css3中伪类与伪元素的区别。
可以先学习php中文网相关的免费课程
1. 《CSS3从入门到精通教程》中 css3伪类选择器 课程
2. 《黑马程序员css视频教程》中 伪类和伪元素 相关视频教程
立即学习“前端免费学习笔记（深入）”；
伪类与伪元素的区别
CSS3中的标准是伪类使用单冒号“:” 而伪元素使用双冒号“::”（避免混淆） 但是在此之前无论是伪类还是伪元素都使用单冒号“:” 所以为了保证兼容伪元素两种使用方法都是可以的
但是低版本IE有双冒号兼容问题 ，所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号 ，导致这种混淆一直延续下来。
2. CSS伪类和伪元素的区别
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。link用在为访问的连接上。visited用在已经访问过的连接上。hover用于鼠标光标置于其上的连接。active用于获得焦点(比如，被点击)的连接上。
我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？
伪类一开始只是用来表示一些元素的动态状态，典型的就是大家常用的链接的各个状态（link、active、hover、visited），随后css2标准
扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。
伪元素则代表了某个元素的的子元素，这个子元素虽然逻辑上存在，但是并不实际上存在于文档树中，如我们平时用的after、before等。
6. 浅谈CSS的伪类与伪元素
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
相关问答
