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

最新推荐文章于 2025-02-05 22:11:02 发布

Jaked_M

最新推荐文章于 2025-02-05 22:11:02 发布

阅读量291

点赞数

本文链接：https://blog.youkuaiyun.com/Jaked_M/article/details/100539118

版权

本文探讨了CSS中的伪类和伪元素的区别，指出伪类主要定义元素状态，如`:hover`、`:active`，而伪元素如`::before`、`::after`则是虚拟元素。通过实例解释了`:required`、`:valid`、`:invalid`在表单校验中的应用，以及`:target`实现折叠面板，`:nth-child()`和`:nth-of-type()`在元素索引中的用法。同时，文章还提到了CSS在美化选中文本、处理antd彩蛋事件等方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

640?wx_fmt=gif

面试前端候选人的时候，我经常会问这样一个有关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，指定一个不匹配指定要求的表单元素

看下面这个例子：

<p>input中类型为email的校验</p>

<p>符合email校验规则</p>
<input type="email" required placeholder="请输入" value="24238477@qq.com" />
<br><br>

<p>不符合email校验规则</p>
<input type="email" required placeholder="请输入" value="lalala" />
<br><br>

<p>有required标识，但未填写</p>
<input type="email" required placeholder="请输入" value="" />

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;
    }
}

效果如下： 640?wx_fmt=png

折叠面板

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

看下面这个例子：

<div class="t-collapse">
    <!-- 在url最后添加 #modal1，使得target生效 —>
    <a class="collapse-target" href="#modal1">target 1</a>
    <div class="collapse-body" id="modal1">
        <!-- 将url的#modal1 变为 #，使得target失效 —>
        <a class="collapse-close" href="#">target 1</a>
        <p>...</p>
    </div>
</div>

.t-collapse {
    >.collapse-body {
        display: none;
        &:target {
            display: block;
        }
    }
}

元素的index

当我们要指定一系列标签中的某个元素时，并不需要用JavaScript获取。可以用 :nth-child(n) 与 :nth-of-type(n) 来找到，并指定样式。但它们有一些小区别，需要注意。

首先，它们的n可以是大于零的数字，或者类似2n+1的表达式，再或者是even/odd。

另外，还有2个区别：

:nth-of-type(n) 除了关注n之外，还需要关注最前面的类型，也就是标签。
:nth-child(n) 它关注的是：其父元素下的第n个孩子，与类型无关。

看下面这个例子，注意两者的差异：

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

640?wx_fmt=png

实战场景——伪元素

antd的彩蛋事件

还记得2018年圣诞节的“彩蛋事件”，在整个前端圈，轰动一时。因为按钮上的一朵云，导致不少前端er提前回家过年了。当时，彩蛋事件出现的第一时间，就吓得我赶快打开工程看了一眼，果然也中招了。为了保住饭碗，得赶紧把云朵去掉。

查看了生成的html，发现原来是 button 下藏了一个 ::before。所以，赶紧把样式覆盖掉，兼容代码如下：

.ant-btn {
    &::before {
        display: none !important;
    }
}

美化选中的文本

在网页中，默认的划词效果是，原字色保持不变，划过时的背景变为蓝底色。其实，这是可以用 ::selection 来进行美化的。看下面这个例子：

<p>Custom text selection color</p>

::selection {
    color: red;
    background-color: yellow;
}

640?wx_fmt=png 划过的部分美化为：红色的字体，并且底色变为了黄色。

总结

CSS也可以实现动态的交互，并非只有JavaScript才能实现。

书写的时候，要尊重规范。写伪类的时候用 :，而写伪元素的时候用::。

兼容性的问题，交给postcss去做。本文并未涉及兼容性的写法，包括前缀问题，可以交给autoprefixer去做。

附录

CSS3中的伪类

:root 选择文档的根元素，等同于 html 元素

CSS3中的伪元素

::after 已选中元素的最后一个子元素

超哥的独白

Hi，大家好！

同事都叫我超哥，专注前端开发8年。

目前在知名游戏公司的广告技术中心担任前端负责人。

曾在游族网络、厚本金融、篱笆网等多行业担任资深前端开发。

在此与你分享观点，切磋技术，期待共同学习成长！

别光看，

赶紧长按关注呀！

往期精彩回顾

年终总结 | 2018再见！

求职 |「今日头条」前端面试题和思路解析

求职 |「写在寒冬」分享给前端er的

求职和成长建议

戳蓝色阅读原文，

带你飞去超哥的segmentfault！