伪类和伪元素

伪类

伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

常用伪类：

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时，向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。

伪元素可以创建一些文档语言无法创建的虚拟元素。

常用伪元素

::before 在每个选中元素之前插入内容

::after 在每个选中元素之后插入内容

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类

伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类与伪元素最本质的一个区别：

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

1、伪元素的由两个冒号::开头，然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素，一般为了考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号:: 。（before和after是css2中就存在的伪元素，不排除后期有新增伪元素）

2、一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器； CSS3中伪类和伪元素的语法不同；一个元素可以同时使用多个伪类，而只能同时使用一个伪元素.