相信大家在学习css选择器的时候经常会遇到一个问题就是伪类和伪元素傻傻分不清楚
其实最简单的分辨方式就是看有几个冒号伪类是一个冒号，而伪元素则用两个冒号来表示。
常见的伪类选择器
伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover
:focus
/* 伪类将应用于拥有键盘输入焦点的元素。 */
a:hover
/* 鼠标经过触发。 */
a:link
/* 未访问的链接 */
a:visited
/* 已访问的链接 */
a:active
/* 已选中的链接 */
a:nth-child(n)
/* 选择所有a元素的父元素的第n个子元素*/
注意伪类选择器仅仅只是选出DOM中已经存在的元素，并不会改变代码的结构
常见的伪元素选择器
伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。
a::before
/* before" 伪元素可以在元素的内容前面插入新内容 */
a::after
/* after" 伪元素可以在元素的内容后面插入新内容 */
::before和::after这两个伪类下有特有的属性content，必须有这个属性。
总之，伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。