伪类和伪元素区别和理解

1.伪类：对于普通DOM节点，我们可以通过各种选择器选中他们并对其操作，但对于某些具有特殊状态的DOM节点，比如说鼠标经过的元素，被选中的元素，这些状态信息位于DOM树之外，不能通过一般的选择器进行选中，需要用到伪类来进行选中。诸如：active,:hover,:visited 这些就是常见的伪类。除此之外，要选中带有逻辑性质的元素，比如说选中第一个子孩子节点，选中所有奇数的<li></li>元素，也很难直接通过一般的选择器进行，需要用到：first-child,:odd 这些伪类。

    总而言之，伪类的作用就是匹配带有某种状态的DOM的元素或者按照一定的逻辑进行匹配元素，但需要注意的是，伪类选择的元素都是在DOM树中存在的节点。

2.伪元素：相较于伪类，伪元素与伪类最大区别是伪元素创造了文档之外的新节点，比如：after，：before都是创造了文档之外的元素。

语法区别：CSS3规定，伪元素一律采用双冒号，伪类采用单冒号,比如:hover,:active,这些伪类使用单冒号，::after,::before这些伪元素使用双冒号，但是由于最初浏览器都是不区分单冒号和双冒号，为了兼容所有浏览器，大部分伪元素都支持写成单冒号和双冒号，但是某些伪元素比如说如::backdrop 必须使用双冒号。