「前端面试题系列3」伪类与伪元素的区别及实战

前言

这是前端面试系列的第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明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。

实战场景——伪类

表单校验

表单的校验中，常会用到 :required、:valid 和 :invalid 这三个伪类。先来看看它们所代表的含义。

:required，指定具有 required属性的表单元素
:valid，指定一个匹配指定要求的表单元素
:invalid，指定一个不匹配指定要求的表单元素

看下面这个例子：

input中类型为email的校验

符合email校验规则





不符合email校验规则





有required标识，但未填写

input {
    &:valid {
        border-color: green;
        box-shadow: inset 5px 0 0 green;
    }
    &:invalid {
        border-color: red;
        box-shadow: inset 5px 0 0 red;
    }
    &:required {
        border-color: red;
        box-shadow: inset 5px 0 0 red;
    }
}

效果如下：

折叠面板

过去，要实现折叠面板的显示或隐藏，只能用JavaScript来搞定。但是现在，可以用伪类 :target 来实现。 :target 是文档的内部链接，即 URL 后面跟有锚名称 #，指向文档内某个具体的元素。