css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器，有时候我们用的是[:]，有时候用的又是[::]，有时候又好像两者都行，这到底是为什么呢？今天我们就来看看这两个东西到底有啥不一样。
要想知道他们的区别，首先我们就需要搞清楚两个概念——伪元素和伪类。
那么什么是伪元素，什么是伪类呢？
官方的定义是这样的（来自W3C）：
1、CSS 伪类用于向某些选择器添加特殊的效果。
2、CSS 伪元素用于将特殊的效果添加到某些选择器。
乍一看，这概念也太绕了。但是别着急，我们仔细看着两个概念里面都出现了两个重要的关键词：选择器、特殊。
选择器不用多说，这两个东西都是给我们用来对某些元素进行选择操作的；
特殊呢，则指的是这两个东西都能够做到用其他CSS无法做到的事情；
而且他们都有一个共同点就是，他们都是基于上一层选择器进行的选择，也就是他们的使用都必须有上一层已经选好的元素供他们操作。
这样一看，其实我们就能大概明白他们是什么作用了：
伪类
伪类其实就是一个选择器，与原有的class一样，它可以作用于所有元素，只要给该元素添加上相应地伪类，与传统的class的区别只不过是它是在标准中预定义好的，不会在文档流中体现，而且只会有那么些个；
常见的伪类：
（状态类）:link/:hover/:active/:focus/:visited
（结构类）:first-child/:last-child/:nth-child/:nth-last-child/:only-child/:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-of-type/:not/:target/:empty
（表单类）:disabled/:enabled/:required/:optional/:read-only/:read-write/:default/:valid/:invalid/:focus
（文本类）:placeholder-shown
（选择类）:checked/:indeterminate
（数字类）:in-range/:out-of-range
举例：
比如，我们想让鼠标光标滑到某个div上时，该div展示一个特殊的样式，这个时候我们就需要使用到:hover这个伪类选择器。
//html
<div>我是文字，鼠标滑过我，字体颜色变成红色</div>
//css样式
div:hover {
color: red
}伪元素
伪元素就像它的名字一样，本质上可以相当于一个元素，只不过这个元素特殊在于，它不在普通的文档树种存在，只是基于元素的抽象，仿佛一个没有实体的灵魂，只在需要用到它的地方出现，比如元素内容的第一个字母或者第一行，而且它针对的特殊状态与伪类不同，它的操作层次比伪类更深了一层，所以它的动态性比伪类要低得多；
常见的伪元素：
::after/::before/::first-letter/::first-line
::selection/:placeholder
伪元素存在于任何一个标签中，天生就存在，可以使用css来修改它，供我们使用。
举例：
如果想给页面上渲染出来的每个div标签里展示的文案后面都加一个文案“我是div”，就可以这样：
//css样式
div::after {
content: 我是div
}这样比给每个div的html结构里都加上这几个字的代码简洁吧，没了很多冗余代码。当然，开发中，我们一般不用伪元素干这个活，毕竟也太傻了，我们一般用伪元素来给某个div加上一个三角，或者用伪元素来清除浮动。
但其实伪元素也是可以用单引号来表示的，这也是他们被创造之初的使用方式，但后来为了将它们与伪类区分开来，于是官方建议伪元素统一使用双冒号[::]。也正因如此，在处理浏览器的兼容性问题上，伪元素使用单冒号可以更好地向后兼容。
总结
1.伪元素是创建了一个新元素，而伪类本身就存在只不过不用特别声明，可以在需要的时候使用它；
2.一般情况下，单冒号的都是伪类，双冒号的都是伪元素；但某些伪元素也可以使用单冒号，并且在需要向后兼容的情况中，使用伪元素时建议优先使用单冒号，其他情况下，建议一律使用双冒号以区分伪类；
3.伪元素只能同时使用一个，伪类可以同时使用多个。