全面解读伪类和伪元素 #

伪类选择器： #

用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过：hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪类存在的意义是为了通过选择器，格式化 DOM 树以外的信息以及不能被常规 CSS 选择器获取到的信息。

伪元素选择器： #

用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过：before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际。上不在文档树中。 伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一一个字母或第一行， 但伪元素可以做到 (first-letter. :firit-iline)。 同时，伪元素还可以创建源文档不存在的内容，比如使用：:before 或：:after。

伪类和伪元素选择器的区别： #

• 伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
• 伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• CSS3 中 伪类和伪元素的语法不同；
• 在 CSS3 中，已经明确规定了伪类用一一个冒号来表示，而伪元素则用两个冒号来表示。
• 可以同时使用多个伪类，而只能同时使用一个的元素；

伪类图 #

伪元素 #