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

栏目: CSS · 发布时间: 5年前

内容简介:这是前端面试系列的第3篇,前面的章节,你可以在这里找到:面试前端候选人的时候,我经常会问这样一个有关CSS的问题:你知道伪类与伪元素么,它们的分别是什么? 这时,能回答上来的很少。

这是前端面试系列的第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,指定一个 不匹配指定要求 的表单元素

看下面这个例子:

<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;
    }
}
复制代码

效果如下:

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

折叠面板

过去,要实现折叠面板的显示或隐藏,只能用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个区别:

类型

看下面这个例子,注意两者的差异:

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
复制代码
「前端面试题系列3」伪类与伪元素的区别及实战

实战场景——伪元素

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;
}
复制代码

效果如下:

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

划过的部分美化为:红色的字体,并且底色变为了黄色。

总结

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

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

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

附录

CSS3中的伪类

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

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素意外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:nth-child(n) 匹配父元素下指定子元素,在所有子元素中 排序 第n

:nth-last-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n,从后向前数

:nth-child(odd) 、 :nth-child(even) 、 :nth-child(3n+1) :first-child 、 :last-child 、 :only-child

:nth-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n,从后向前数

:nth-of-type(odd) 、 :nth-of-type(even) 、 :nth-of-type(3n+1) :first-of-type 、 :last-of-type 、 :only-of-type


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript DOM高级程序设计

JavaScript DOM高级程序设计

Jeffrey Sambells、Aaron Gustafson / 李松峰、李雅雯 / 人民邮电出版社 / 2008-7 / 59.00元

本书注重理论与实践的结合,全面讲述高级的DOM 脚本编程。全书分为3 个部分:第一部分“深入理解DOM 脚本编程”,涉及W3C DOM 规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以Ajax 和客户端—服务器端通信为主题;第三部分“部分高级脚本编程资源”,集中介绍了一批第三方脚本编程资源,包括库和API。同时,每部分的最后一章都为案例研究,将学到的内容应用于实践......一起来看看 《JavaScript DOM高级程序设计》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具