伪类及伪元素的区别

一、什么是伪类及伪元素？


1、什么是伪类？

官方给的解答是：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素。
2、什么是伪元素？
官方给的解答是：伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。


这么一看是不是很懵圈？那就是了，接下来详细讲一下为什么会懵圈。


二、伪类及伪元素容易混淆的点：
很多朋友在css1及css2开始就已经接触到了前端，但是在css3之前，伪类及伪元素的写法都是加在:之后的。举个栗子：
这是一个伪类：

1. a:hover {
   
2. color:red;
   
3. }

复制代码

这是一个伪元素：

1. input:after {
   
2. content:'哈哈哈'
   
3. }

复制代码

这样就会出现写法一样造成有时候难以区分，因此在CSS3中将伪元素的写法更新成两个:的形式了。但是目前浏览器都还是识别css3之前的写法。但是建议大家还是将伪元素的写法更新成css3的写法：

1. input::after {
   
2. content:'哈哈哈哈'
   
3. }

复制代码

三、伪类及伪元素的区别：
那么问题来了，两者的区别到底是什么呢？
区别的关键是：它们是否创造了新的元素。
我们看官方给的解答中：伪元素是虚拟的元素。因此伪元素是会新创建一个元素出来。例如上边栗子中的伪元素例子，会在input之后创建一个‘哈哈哈’出来。而官方解答中的伪类则是存在于DOM之中的，因此它不会创建出新的元素，而是会对元素进行修饰的而已。


综上就是伪类及伪元素的区别。
转自：http://bugshouji.com/shareweb/t634