1.伪类
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
| 伪类 | 作用 |
| :active | 将样式添加到被激活的元素 |
| :focus | 将样式添加到被选中的元素 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 将特殊的样式添加到未被访问过的链接 |
| :visited | 将特殊的样式添加到被访问过的链接 |
| :first-child | 将特殊的样式添加到元素的第一个子元素 |
| :lang | 允许创作者来定义指定的元素中使用的语言 |
伪类的定义：
(1)伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
(2)伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
(3)任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
i:first-child {color: red} <p> <i>first</i> <i>second</i> </p>
不用伪类，希望达到上述效果，直接添加类：
.first-child {color: red} <p> <i class="first-child">first</i> <i>second</i> </p>
而使用伪元素:first-letter，第一个字母：
p:first-letter {color: red} <p>I am stephen lee.</p>
如果想要达到上述效果，我们可以这样做:
p:first-letter {color: red} <p><span>I<span> am stephen lee.</p>
给I添加span标签才能达到这种效果，有时自己干想想不出区别，还得亲自动手，现在比较清楚伪类和伪元素的区别了。
前五个伪类在https://i.cnblogs.com/EditPosts.aspx?postid=7490649&update=1讲过
:focus怎样使用呢？
通常我们点击用户名和密码输入框时，会改变颜色，这就用到了：focus
input:focus { background-color:blue; } 用户名：<input type="text" height="40px" width="200px"/>
2.伪元素
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
| 伪元素 | 作用 |
| :first-letter | 将特殊的样式添加到文本的首字母 |
| :first-line | 将特殊的样式添加到文本的首行 |
| :before | 在某元素之前插入某些内容 |
| :after | 在某元素之后插入某些内容 |
伪元素的定义：
(1)伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
(2)伪元素的由两个冒号::开头，然后是伪元素的名称。
(3)使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。
(4)一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
之后会开一篇关于：before与：after的使用
:after伪类+zoom是目前最使用的清除浮动元素影响的方法