伪类和伪元素的区别

• 伪类

1.定义：伪类的存在意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
  从定义中知道伪类的功能有两种：
  （1）格式化DOM树以外的信息。比如：<a>标签的“:link”,“:visited”等，这些信息不存在于DOM树中。
  （2）不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过：“:first-child”来获取到。

• 伪元素

  伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter,::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用(::before)或(::after).

• 伪类和伪元素的区别（CSS下的区别）

  伪类：
  其实是弥补了CSS选择器的不足，用来更方便地获取信息
  HTML：
  <ul>
  	<li>1111</li>
  	<li>2222</li>
  </ul>
    
  CSS:
  li:first-child{
  	color:red;
  }
  选择器不能直接选取第一个子元素
  伪类弥补了选择器的不足
  

  伪元素：
  伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
  HTML:
  <p>
  	<span class="first-letter">H</span>ello,World
  </p>
    
  CSS:
  .first-letter{
  	color:red;
  }
    
  上面的代码，其实就是：
  p::first-letter{
    color:red;
  }
    
  总结：
  （1）在CSS3中，伪类用单冒号：表示，而伪元素用双冒号::表示。
  （2）一个选择器可以同时使用多个伪类（但有的伪类会互斥）；而一个选择器只能同时使用一个伪元素（未来的版本可能会支持多伪元素）。