伪类和伪元素的区别

Posted 2021-10-08 夏夏小姐姐

1）伪类

   用来选择DOM树之外的信息,以及添加一些选择器的特殊效果,可以理解为是标签的一种状态,这个状态是非静态的,当元素达到一个特定状态时,会有一个伪类的样式,当状态改变时,又会失去这个样式
   比如:hover,:active,:visited,:link,:focus,:first-child

2)伪元素

DOM树没有定义的虚拟元素,需要创建通常不存在于文档中的元素,比如::before,::after将特殊的效果添加到选择器

3)区别

css3中伪类使用单冒号表示,伪元素使用双冒号表示
关键区别在于有没有伪元素,如果需要添加元素才能达到效果,则为伪元素,反之则是伪类
伪类是基于普通DOM元素而产生的不同状态,是DOM元素的某一特征
伪元素是创建在DOM树中不存在的抽象对象,而且这些抽象对象是能访问到的