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; }