是什么：

• 伪类（一个冒号隔开）像类选择器一样给已存在某个元素添加额外的样式；
• 伪元素（两个冒号隔开）则是给自己虚拟的元素添加样式；

为什么：

伪元素选择器可以帮助我们利用css创建标签元素，而不用html，减少了html的结构复杂性。(结构永远比样式更重要!）

怎么做：

常用的伪类：

hover指当鼠标移动到元素上时触发某种样式；
:hover

active指鼠标按下时的某种样式；
:active

:first-child 
:last-child 
:nth-child(n/odd/even)

常用伪元素:

其中before或者after内的content属性一定要设置，可以设置为空，否则不会显示；其次，设置了依然没有显示就要设置表明这个伪元素块级元素。

前面(before)添加元素
::before{
    content:'';
    display: inline-block;
    width: 10px;
    height:10px;
    background: #ffab00;
    border-radius:50%;
}

后面(after)添加元素
::after

伪元素虽然是不存在于DOM树种的元素，但是也是可以添加内容的，就是上面提到的content属性。content属性可以是URL、字符串甚至是图片，视频等。

div::before{
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background:url('a.png')
    background-size:cover;
}