css的伪类和伪元素在我们平常的工作中有着很广泛的应用，比如:hover、:active、:after等等，但是大部分人可能并不清楚伪类和伪元素的具体区别，所以我们今天来简单的梳理一下。 css伪类的定义 由于css2.1中伪类和伪元素的定位并无区别，所以我们直接引用css3中对于伪类的定义（引入来源w3c）定义：引入伪类概念是用于选择不存在于DOM树中的信息或那些不能够通过常规css选择器得到的信息。（比如:hover,:active就属于不在于dom中的信息，nth-child()属于不能够通过常规css选择器得到的信息） 伪类由“冒号”（:）+伪类的名称和伪类括号内的可选参数组成。（伪类括号内的可选参数指:nth-child(n)里的n） 所有的常规选择器都可以在任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的，另一些伪类可以同时应用于同一个元素。为了满足用户在操作DOM时产生的DOM结构改变，伪类可以是动态的。 css伪元素的定义定义：伪元素用于创建和访问文档中不存在的抽象元素。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。使用伪元素可以访问到这些。伪元素还可以让我们访问文档中原本不存在的抽象元素（例如，::before和::after）。 伪元素由两个冒号（::）后跟伪元素的名称组成。 ::两个冒号这种格式，是为了区别伪类和伪元素。与现有样式表的兼容性，考虑到兼容性有部分伪元素可以同时使用1个或者2个冒号，（即:first-line，:first-letter，:before和:after）。对于css3中引入的新伪元素，则必须要使用2个冒号。 每个选择器只能出现一个伪元素，并且伪元素要位于选择器的后面。注意：此规范的未来版本可能允许每个选择器使用多个伪元素。 css伪类和伪元素的区别 伪类和伪元素的语法结构不同，伪类为冒号（:）加伪类名称，伪元素为两个冒号（::）加伪元素名称，不过为了考虑兼容性(css2.1中伪类和伪元素都是一个冒号)，部分伪元素也支持一个冒号的写法，例如（:after,:before,:first-line,:first-letter）。 一个选择器只能使用一个伪元素，但是可以使用多个伪类。 伪类和伪元素的优先级不同，大部分伪类为0-1-0，伪元素则为0-0-1。参考 css选择器的优先级 https://www.chentugen.com/archives/12/
只有一个冒号
作用是：用于向某些选择器添加一些特殊的效果，常见的有：
作用：表示元素中的一些特殊的位置，常见的有：
看是否添加了新的元素（ 只是从视觉效果上添加了，但并没有在文档树中真正的添加 ）
有时一个冒号有时两个冒号，实际上是CSS不同版本的规定而已
伪元素使用一个冒号
为了区分伪类选择器与伪元素选择器，CSS3中规定使用两个冒号
所以，对于 CSS2 标准的老伪元素，比如 :first-line ， :first-letter ， :before ， :after ，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如 ::selection ，就必须写2个冒号了。
参考链接： 伪元素 ::after 和 ::before 应该这么用（一）
a::before {
}
2个冒号是伪元素，其实和1个冒号的效果是一样的，只是为了语义上更清晰明了，所以用了2冒号。
1个冒号代表的是伪类。
2个冒号代表的是伪元素。
伪类在html文档中看不到，也不会显示，如:hover,:disabled。
伪元素在html文档中看的到，也会显示，但是无法用js进行操作。
