伪类

用于已有元素 处于某种状态时 为其添加对应的样式。

这个状态时根据用户行为而动态变化的。

举例：

:hover ：鼠标悬浮时样式

h1:hover{
  color: #42b983;
}

伪元素

用于创建一些不在DOM树中的元素，并为其添加样式。

注意：虽然在页面上可以看的见对应的元素，但实际上用伪元素创建的元素时不存在与DOM树中的。

举例：

在每个h1元素中的开头添加一个“@”，结尾都添加一个“#”，并指定颜色：

h1::before {
  content: '@';
  color: #4283b9;
}
h1::after {
  content: '#';
  color: #4283b9;
}

伪元素与伪类的区别

• 伪元素使用的是“ :: ”，伪类使用的是“ : ”
• 伪元素不允许拼接使用，伪类可以拼接多个使用（需要各个伪类不冲突的情况下）
  

  //可以
  h2:hover:first-child{
      //...
  }
  
  //不可以
  h2::before::after{
      //...
  }

•  伪元素只能在伪类的最后面，伪类则可以为与伪元素前面或者后面
  

  //可以
  h2:hover:first-child::before{
      //...
  }
  
  //不可以
  h2::before:hover{
      //...
  }

• 伪元素是创建一个不存在于DOM树的元素并且可以对其进行操作，伪类是基于DOM来创建不同状态（修饰元素）