伪类与伪元素都很常见，我们经常使用伪类来实现执行一些操作之后样式的变化，比如：link，：active，：hover，：visited等伪类经常被添加到元素上来实现一个链接不同状态下的不同效果。
本文思路：
伪类与伪元素是什么？有何异同？对应的应用场景？
那么先说下伪选择器吧。
首先，伪类与伪元素都属于伪选择器；都是为了改变样式而存在的。
一般来说，我们 都是通过JS控制DOM来改变样式的，而伪选择器则是另一种不用通过JS来改变样式的方法。
其次，伪选择器是为了修饰在文档中不存在的一部分。
伪类与伪元素之所以存在，必然是为了弥补当下既有的普通类与普通选择器的不足，完成它们不能完成的工作，使得某些行为更具灵活性。
所以，我们需要知道它们的工作原理，其次，分析它们 之间的不同，再思考实际应用场景当中如何应用它们使工作得心应手。
什么是伪类？
伪类通常是添加一个实际的类，并为它添加效果；
它可以通过选择器找到那些不存在DOM树中的信息，并且不能被常规CSS选择器找到的信息。
一般之前会添加一个冒号表示这是一个伪类。
什么是伪元素？
伪元素类似于添加一个实际的元素，完成普通选择器不能完成的工作；
本身是基于元素的抽象，并不存在于文档结构中。
一般之前会添加两个冒号表示这是一个伪选择器。
————————————————
常见的伪元素选择器：
::first-letter 选择元素文本的第一个字（母）。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容。
::selection匹配用户被用户选中或者处于高亮状态的部分
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素最好采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
关于伪类的补充----伪类有以下几种类型：
1.状态伪类
用户交互过程中元素状态是动态变化的，并且会根据状态呈现不同样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类主要包括：
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
————————————————
2.结构化伪类
CSS3新增的选择器，利用DOM树进行元素过滤，通过文档结构的互相关系来匹配元素，可以减少Id与class属性定义，使文档结构更简洁。
常见的结构性伪类包括：
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
:disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
应用场景
一.伪类
1.清除浮动
2.元素垂直居中（基线）
3.给盒子添加阴影（rgba代替box-shadow，也可以避免repaint，也是CSS性能优化的方法之一）
做法：设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度。
4.面包屑导航（用：before添加content，再添加/）
5.对话框的小箭头
6.提示框
7.自动打字效果（光标）
8.文章水印
9.图片遮罩
————————————————
二.伪元素
1.清除浮动
2.画分割线
3.计数器
