伪类、伪元素的区别和应用场景

每次被别人闻到伪类和伪元素有什么区别的时候，都是傻傻分不清楚，回答的也不尽人意；因此伪类和伪元素的区别是什么呢？做用是什么呢？本文将从区别与做用两方面来学习伪类和伪元素的知识。

1. 伪类与伪元素的区别
   伪类：w3c的标准定义是：CSS伪类是用来添加一些选择器的特殊效果。

   顾名思义，是一个类，类是什么是css选择器呀，因此css选择器不会存在于dom元素中，因此想一想咱们经常使用的那些是伪类 （不存在与dom结构中，还能控制样式的）第一个想到的应该是a标签的哪几种状态伪类了吧，好比

   a:link {color:#FF0000;} /* 未访问的连接 */
   a:visited {color:#00FF00;} /* 已访问的连接 */
   a:hover {color:#FF00FF;} /* 鼠标划过连接 */
   a:active {color:#0000FF;} /* 已选中的连接 */

   还有一些好比咱们经常使用的:first-child,:last-child :lang :checked :empty,如下为所有
   
   咱们先来总结一些伪类：
   一、伪类是类，因此跟css选择器有关，不存在与dom中
   二、CSS伪类是用来添加一些选择器的特殊效果的
   三、伪类前面以后一个冒号:first-child

2. 伪元素： 伪元素是创造文档树以外的对象。伪元素也是元素，只不过不存在与dom对象中，可是浏览器审查元素的时候能看获得的，好比::before ::after
   
   咱们总结一下伪元素：

   1. 伪元素是两个冒号
   2. 伪元素能够被审查元素看到

   以上总结区分一下二者的区别
   相同点：

   • 伪类和伪元素都不出如今源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

   不一样点：
   伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
   伪元素本质上是建立了一个有内容的虚拟容器；
   CSS3中伪类和伪元素的语法不一样；
   能够同时使用多个伪类，而只能同时使用一个伪元素；
   一句话是伪元素产生新对象，在DOM树中看不到（审查元素的时候能够看到），可是能够操做；伪类不产生新的对象，仅是DOM中一个元素的不一样状态；