css伪类与伪元素区别

伪类:将特殊效果添加到选择器(存在DOM文档中，逻辑上存在但文档树中无需标识)

相当于类属性

伪元素:用于将特殊效果添加到选择器(不存在DOM文档中，是虚拟元素，逻辑上存在)

<p>
    <em>This</em>
    <em>is a text</em>
</p>
//将第一个标签字体变红
em:first-child {//伪类，或者通过给em添加class
    color: red;
}
//将段落的第一个字母变红
p::first-letter {//伪元素，也可以通过添加<span>T</span>实现
    color: red;
}

也就是伪类的效果==添加类实现效果

伪元素的效果==添加元素(标签)实现

区别在于是否抽象创建元素

注意

• 伪类只使用":",伪元素可以使用":",也可以使用"::(常用)"(低版本IE有双冒号兼容问题，所以有时候全用单冒号)

• 伪类就像类一样，可以叠加使用

  em:first-child:hover {/*既满足first-child又满足hover*/
      color: red;
  }
  

• 伪元素在一个选择器中只能出现一次且只能出现在末尾

  p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
      color: red;
  }
  p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
      color: red;
  }
  

• 伪类与类优先级相同，伪元素与标签优先级相同