伪元素和伪类

一、伪元素

（1）伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用 :: 表示伪元素，如：div::before。

CSS2中对伪元素的定义：
CSS 伪元素用于向某些选择器设置特殊效果。

CSS3中伪元素的定义：
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

二：伪类
伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover

CSS2中对伪类的定义：
CSS 伪类用于向某些选择器添加特殊的效果。

CSS3对伪类的定义：
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

1、获取不存在与DOM树中的信息。比如标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2、获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转：

总之，

伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

我的理解：
伪元素生成了抽象元素，这些元素在dom里无法表达
伪类是为已存在的元素进行进一步筛选，（方便为其设置类名？）