伪类包含两种：状态伪类和结构性伪类。
| 状态伪类 | 是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。 |
| :link | 应用于未被访问过的链接； |
| :hover | 应用于鼠标悬停到的元素； |
| :active | 应用于被激活的元素； |
| :visited | 应用于被访问过的链接，与:link互斥。 |
| :focus | 应用于拥有键盘输入焦点的元素。 |
| 结构性伪类 | css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。 |
| :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 | 匹配禁用的表单元素 |
| :empty | 匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素； |
| :enabled | 匹配没有设置disabled属性的表单元素； |
| :in-range | 匹配在指定区域内元素； |
| :out-of-range | 与:in-range相反，它匹配不在指定区域内的元素； |
| :indeterminate | indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框； |
| :valid | 匹配条件验证正确的表单元素； |
| :invalid | 与:valid相反，匹配条件验证错误的表单元素； |
| :optional | 匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性； |
| :required | 匹配设置了required属性的表单元素； |
| :read-write | 匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态； |
| :scope(处于试验阶段) | 匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用； |
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：
| 伪元素 | |
| :first-letter | 选择元素文本的第一个字（母）。 |
| :first-line | 选择元素文本的第一行。 |
| :before | 在元素内容的最前面添加新内容。 |
| :after | 在元素内容的最后面添加新内容。 |
注：伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器，而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。
注意事项
有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
伪元素的应用
如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
.clear:after {
content: '';
display: block;
clear: both;
}在标签内容的前后添加额外内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.content {
color: block;
width: 300px;
padding: 10px;
border: 1px solid gray;
}
.content::before {
content: '我在前面啊';
margin-right: 10px;
padding: 5px;
color: red;
border: 2px dashed blue;
display: inline-block;
}
.content::after {
content: '我在后面啊';
margin-left: 10px;
padding: 5px;
color: red;
border: 2px dashed blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">这里是内容</div>
</body>
</html>
CSS实现递增序号功能，多用于创建目录。
<html>
<head>
<style type="text/css">
body {
width: 400px;
height: 500px;
padding: 10px;
counter-reset: section;
border: 1px solid gray;
}
h3 {
counter-reset: subsection;
}
h3:before {
counter-increment: section;
content: "第 " counter(section) " 章：";
}
h4:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
margin-left: 40px;
}
</style>
</head>
<body>
<h3>可视化格式模型</h3>
<h4>盒模型概述</h4>
<h4>定位概述</h4>
<h3>背景图像效果</h3>
<h4>圆角框</h4>
<h4>投影</h4>
<h4>不透明度</h4>
<h3>布局</h3>
<h4>计划布局</h4>
<h4>设置基本结构</h4>
<h4>固定宽度、流式和弹性布局</h4>
</body>
</html>
通过伪元素实现形变：
<html>
<head>
<style type="text/css">
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 160px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
background: gray;
}
.transform::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(50px) scaleY(2) rotateX(45deg);
transform-origin: bottom;
background: red;
z-index: -1;
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="transform">
</div>
</body>
</html>
总结
伪元素的本质是在不增加dom结构的基础上添加的一个元素，在用法上跟真正的dom无本质区别。普通元素能实现的效果，伪元素都可以。有些用伪元素效果更好，代码更精简。