伪类和伪元素

[chenhuiYj]

伪类

用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

比如 :hover 可以在元素发生鼠标悬停时候作出响应，并且渲染出对应设置的样式。:focus 可以让元素获取焦点的时候响应，并且渲染出对应设置的样式。

CSS 伪类

伪元素

用于创建一些不在DOM树中的元素，并为其添加样式。用户可以看到这些元素，但实际不在 DOM 文档中。

比如，我们可以通过:before来在一个元素之前添加一些图标，并为这些图标添加样式，虽然用户可以看见这些图标，但是它实际上并不在DOM文档中。

CSS 伪元素

区别

简单理解就是，伪类是已有元素的某种状态，伪元素就是新建一个元素