伪类选择器 first-child 误用

Andrman 发布于2019-08-26 13:38 / 1447人阅读

摘要：伪类选择器误用背景最近遇到一个伪类选择器的问题，一直困扰了我好久，因为我居然发现跟我想象中的用法不一样，后来才发现居然确实是自己搞错了，不禁大感惭愧。而伪类前面的标签类型，只是起到个筛选的作用。

伪类选择器 first-child 误用

背景

最近遇到一个 css 伪类选择器的问题，一直困扰了我好久，因为我居然发现跟我想象中的用法不一样，后来才发现居然确实是自己搞错了，不禁大感惭愧。

解决过程

我这里要介绍的就是 :first-child 这个伪类，我想象中的用法是这样的：

html 代码部分：


    第一个 span
    第二个 span
    第三个 span

css 代码部分：

.root>span:first-child{
    background: red;
}

最后页面效果：

可以看到第一个 span 的背景被设置为了红色。

本来这样用一直都是不错的，我一直以为这个选择器选择的是第一个 element 元素，而我以前一直也都是这样用的，也一直没出过什么差错。

但是直到最近我遇见了下面这个情况，才真正搞得我抓狂了。

html 代码部分：


    第一个 div
    第一个 span
    第二个 span
    第三个 span

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

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

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

感悟

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

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

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109209.html

伪类选择器 first-child 误用

摘要：伪类选择器误用背景最近遇到一个伪类选择器的问题，一直困扰了我好久，因为我居然发现跟我想象中的用法不一样，后来才发现居然确实是自己搞错了，不禁大感惭愧。而伪类前面的标签类型，只是起到个筛选的作用。伪类选择器 first-child 误用背景最近遇到一个 css 伪类选择器的问题，一直困扰了我好久，因为我居然发现跟我想象中的用法不一样，后来才发现居然确实是自己搞错了，不禁大感惭愧。...

malakashi 2019-08-30 15:56 评论0 收藏0
伪类和伪元素的区别

摘要：伪元素用于将特殊的效果添加到某些选择器。因此，伪类与伪元素的区别在于有没有创建一个文档树之外的元素。伪类代表了一组兄弟元素中的第一个元素。伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。在css2中是这样定义二者的： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不...

starsfun 2019-08-29 15:09 评论0 收藏0
css3伪类和伪元素你都懂了吗

摘要：什么是伪类伪类用于定义元素的特殊状态。例如，它可用于当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素。什么是伪类？伪类用于定义元素的特殊状态。例如，它可用于：当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为...

LoftySoul 2019-08-30 15:44 评论0 收藏0
CSS伪类伪元素详解

摘要：选择器大致可以分成类基本选择器，层次选择器，属性选择器，伪类，伪元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是...

lookSomeone 2019-08-29 11:09 评论0 收藏0