css的伪类和伪元素

今天突然有人问我伪类和伪元素的区别，我想了想说：伪类前面有一个冒号，伪元素前面有两个冒号。然后我笑了，因为我只知道那么多区别，平时大部分都是使用伪元素after和before多些。然后今天就百度了一下，并且总结一下。

1.什么是伪类？  什么是伪元素？

(1)、两者的定义：

伪类：伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

(2)、两者的区别：

伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。

伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。

另外一个简单的理解和区分就是：

伪类前面是一个冒号，为元素前面是两个冒号。E:first-child 伪类，E::first-line伪元素。

特殊情况::before 和 ::after 伪元素

问题来了，那么为什么我们平时用before和after前面就一个冒号？

当你看了css2选择器就知道了，老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大

家注意了，往后在写css3的时候，伪元素要用两个冒号，伪类用一个冒号

常见的伪类有：

:active    向被激活的元素添加样式。
:focus    向拥有键盘输入焦点的元素添加样式。
:hover    当鼠标悬浮在元素上方时，向元素添加样式。
:link    向未被访问的链接添加样式。   
:visited    向已被访问的链接添加样式。 
:first-child    向元素的第一个子元素添加样式。 
:lang    向带有指定 lang 属性的元素添加样式

常见的伪元素有：

:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。