【面试题系列3】伪类与伪元素的区别及实战

面试前端候选人的时候，我经常会问这样一个有关CSS的问题：

你知道伪类与伪元素么，它们的分别是什么？

这时，能回答上来的很少。

换一种问法，你知道 :hover, :active, :focus, :visited么？

这时，基本都能回答上来，这不就是a标签的四种状态么。

嗯，ok。然后继续问，那么 ::before 和 ::after，听说过么？

这时，能听到的回答是，嗯，我看到过，偶尔会用。

伪类与伪元素，都有一个“伪”字，那它们有什么区别么？

这时，回应我的，是一片沉默。。。

从回答上来分析，虽然伪类和伪元素平时都有接触，但在概念上，都比较模糊。今天，我们就来说说伪类与伪元素的区别，以及使用场景。伪类，不是只有a标签的四种状态。伪元素，也不是只有 ::before 与 ::after。更多的伪类与伪元素，详见文末附录。

概念上的区别

从概念上来区分，大致有以下几点：

伪类，更多的定义的是状态。常见的伪类有 :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。

伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有 ::before，::after，::first-letter，::first-line等等。

CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。

实战场景——伪类