伪类和伪元素的区别

伪类和伪元素的区别

伪类

  1、本质上是为了弥补常规CSS选择器的不足；
  2、可以同时使用多个伪类；
  3、存在DOM文档中（元标签找不到，只有符合触发条件时才看到），逻辑上存在，但在文档树中却无须标识的“幽灵”分类。
  4、如a元素的四个伪类：
        :link         定义正常链接的样式；
        :visited      定义已访问过链接的样式；
        :hover        定义鼠标悬浮在链接上时的样式；
        :active       定义鼠标点击链接时的样式。
        （每次定义链接样式时务必确认定义的顺序，link--visited--hover--active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。）

伪元素

  1、本质上是创建了一个有内容的虚拟容器；
  2、只能同时使用一个伪元素；
  3、不存在DOM文档中，是虚拟的元素，是创建新元素；（代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。）
  4、如::before 、::after

其中伪类和伪元素的根本区别在于：是否创造了新的元素，新创造的元素就叫伪元素

W3C中对于两者应用的描述：

  伪类：用于向某些选择器添加特殊的效果
  伪元素：用于将特殊的效果添加到某些选择器（标签）

注意：

  伪类只能使用“：”
  而伪元素既可以使用“:”，也可以使用“::”
  因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

  伪对象要配合content属性一起使用
  伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
  伪对象的特效通常要使用:hover伪类样式来激活

相关问题：

  :after /::after和:before/::before的异同
  相同：  都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的; :after和::after写法是等效的
  不同点：  :before/:after是CSS2的写法，::before和::after是CSS3的写法，CSS2要比CSS3的兼容性好，但在H5开发中建议使用::before/::after