伪类选择器 first-child 误用

伪类选择器 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，感觉看起来好像有点像是我想要的伪类选择器一样，于是我怀着激动的心情点进去了。

简单的翻译一下，该伪类元素代表着在一组兄弟元素中，这个类型的元素的第一个元素。

换上这个伪类以后，终于达到了理想的效果：

感悟

有些基础的东西，刚开始学的时候，由于经验不足，即使当时死记硬背记下来了，但是可以说仍旧是处于一知半解的状态。而后面在实际运用的过程中，如果达到了自己想要的效果，也不会回头查阅手册。

可以说，这次犯的这个小错误，对我个人而言也起到了警醒的作用吧。对于一些我们总是认为自己已经掌握了的，认为好像很简单的东西，我们总是不屑一顾去回头温习。因此一旦出了问题，我们往往很难发现究竟是什么原因导致了我们的挫败。

这大概就是我们常说的，当局者迷，旁观者清吧。

如果，我们能做到时常回顾一下最基础的知识，那么我相信对我们自身的成长会有极大的好处的。我相信在每一遍回顾的时候，都会得出不一样的感悟。而每一次温习，都会学习到新的东西。常学常新并不是一句妄语，我相信，境界不同的人，看同一个事物得到的会是不一样的结果的。

要不怎么会有佛家有三重境界一说呢。