伪类和伪元素区别；

<!-- CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。-->
<!-- 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。-->

/* Add a heart before links */
a::before {
  content: "♥";
}

<!-- CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。 -->
<!-- 通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 -->
/* Add an arrow after links */
a::after {
  content: "→";
}

伪元素总结

• 不能应用在替换元素上，比如 img 或 br
• ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素
• 常通过 content 属性来为一个元素添加修饰性的内容（默认为行内元素）
• CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。
• 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在可替换元素上。

可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

与伪类的区别

• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• 其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素” 。
• 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。
• 这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.
• 伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
• W3C中对于二者应用的描述(描述太模糊, 不容易理解)

抽象记忆

• first-child的作用就像是一个类名，它只是把你想要的元素区分出来，那些元素本身就存在；
• 而first-line则表现得像是“新建了一个元素”一样，以这样的形式去寻找你想要的内容。
• 所以，一个“像类”（伪类），一个“像元素”（伪元素）。