css伪类用于向某些选择器添加特殊的效果
css伪元素用于将特殊的效果添加到某些选择器
伪类种类
| :active | 将样式添加到被激活的元素 |
| :focus | 将样式添加到被选中的元素 |
| ：hover | 鼠标悬浮在上方 |
| ：link | 未被访问过的链接 |
| ：visited | 被访问过的链接 |
| ：first-child | 特殊的样式添加到元素第一个子元素 |
| ：lang | 允许创作者来定义指定的元素中使用的语言 |
伪元素种类
| ：first-letter | 将特殊的样式添加到文本的首字母 |
| ：first-line | 将特殊的样式添加到文本的首 |
| ：before | 在某元素之前插入某些内容 |
| ：after | 在某元素之后插入某些内容 |
区别
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实例才能达到，这样式他们为什么一个称为伪类，一个称为伪元素的原因
总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者
伪元素的使用
css伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素
a::after{
content:"->";
background-color:red;
border-color:black;
border-style:dotted;
}
提示用法
attr() css表达式和一个自定义数据属性data-descr创建一个存css，词汇表提示工具
span[data-descr]:hover::after{
content:attr(data-desrc);
将属性为data-desrc的属性值变为伪元素
//这里写伪元素的样式
}
content:url(链接)
content:"("attr(href)")" //感觉是字符串和变量连接在一起
清除浮动
实现多张背景图片
做一些动画
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "5B"; left: -10px; }
a:hover::after { content: "5D"; right: -10px; }