伪元素和伪类的区别总结

伪元素选择符：

伪类选择符：

 二者应用的描述：

伪元素是将某些特殊的效果添加到元素上；

伪类选择器是给元素添加某些特殊效果；

根本区别在于：它们是否创造了新的元素。     伪元素是虚拟元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

注意：
     伪类只能使用“:”
     而伪元素既可以使用“:”，也可以使用“::”
     因为伪类是类似于添加类，所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。 伪对象要配合content属性一起使用。
    伪对象不会出现在DOM中，故不能通过js来操作，仅仅是在 CSS 渲染层加入。
   伪对象的特效通常要使用:hover伪类样式来激活。（eg：划过span时，在头部添加一个“热”字）

 最后，伪类和伪元素的应用例子（ 需求：给第一个p加颜色“red”）：

<div>
  <p>aaa</p>
  <p>bbb</p>
  <p>ccc</p>
</div>

1）用伪类实现非常简单，如下：

 2）如果使用伪元素实现，可以是如下：

其他方法如使用普通选择器可以实现，也是一样的。这里只比较伪元素和伪类。