伪类选择器 first-child 误用
背景
最近遇到一个 css 伪类选择器的问题,一直困扰了我好久,因为我居然发现跟我想象中的用法不一样,后来才发现居然确实是自己搞错了,不禁大感惭愧。
解决过程
我这里要介绍的就是 :first-child 这个伪类,我想象中的用法是这样的:
html 代码部分:
<div class="root">
<span>第一个 span</span>
<span>第二个 span</span>
<span>第三个 span</span>
</div>
css 代码部分:
.root>span:first-child{
background: red;
}
最后页面效果:
可以看到第一个 span 的背景被设置为了红色。
本来这样用一直都是不错的,我一直以为这个选择器选择的是第一个 element 元素,而我以前一直也都是这样用的,也一直没出过什么差错。
但是直到最近我遇见了下面这个情况,才真正搞得我抓狂了。
html 代码部分:
<div class="root">
<div>第一个 div</div>
<span>第一个 span</span>
<span>第二个 span</span>
<span>第三个 span</span>
</div>
这时候,我想故伎重演,用 #root > span:first-child
选中第一个 span 元素,发现死活选中不了。
后来我灵机一动,改成这样:
.root > :first-child{
background: red;
}
发现 div 被染上颜色了:
我隐隐约约感觉自己好像明白了点什么,于是我急忙点开快被我翻烂了的“前端圣经”网站——mdn,找到 :first-child 词条,开头内容这么说的:
很简单的内容,大意就是说,我们这个伪类代表的是在一组兄弟元素中的第一个元素。而伪类前面的标签类型,只是起到个筛选的作用。
看到这里我们就明白了,这个选择器,工作的逻辑是这样的。拿到一组兄弟元素,然后从中拿到第一个元素,然后判断一下,这个元素是不是跟冒号前面所指定的元素类型一样的。如果是一样,这个元素则被选中;否则则不被选中。
如果用 js 解释描述一下这个逻辑,大概就是下面这样:
let root = document.querySelector(".root");
let firstElementChild = root.firstElementChild;
if(firstElementChild.tagName.toLowerCase() === 目标标签){
// 执行一些操作
}
所以,到这里我就彻底明白了,原来是我一直对于 :first-child 和 :nth-child() 这两个 css 伪类存在误解。
那么到底怎么样才能实现我想要的效果呢?
不得不说,mdn 的网站编排绝对是用了心的。正当我准备打开搜索引擎,搜索一番的时候,我看到了侧边的导航栏: 后面紧跟着的词条是 :first-of-type,感觉看起来好像有点像是我想要的伪类选择器一样,于是我怀着激动的心情点进去了。简单的翻译一下,该伪类元素代表着在一组兄弟元素中,这个类型的元素的第一个元素。
换上这个伪类以后,终于达到了理想的效果:感悟
有些基础的东西,刚开始学的时候,由于经验不足,即使当时死记硬背记下来了,但是可以说仍旧是处于一知半解的状态。而后面在实际运用的过程中,如果达到了自己想要的效果,也不会回头查阅手册。
可以说,这次犯的这个小错误,对我个人而言也起到了警醒的作用吧。对于一些我们总是认为自己已经掌握了的,认为好像很简单的东西,我们总是不屑一顾去回头温习。因此一旦出了问题,我们往往很难发现究竟是什么原因导致了我们的挫败。
这大概就是我们常说的,当局者迷,旁观者清吧。
如果,我们能做到时常回顾一下最基础的知识,那么我相信对我们自身的成长会有极大的好处的。我相信在每一遍回顾的时候,都会得出不一样的感悟。而每一次温习,都会学习到新的东西。常学常新并不是一句妄语,我相信,境界不同的人,看同一个事物得到的会是不一样的结果的。
要不怎么会有佛家有三重境界一说呢。
网友评论