美文网首页
伪类选择器 first-child 误用

伪类选择器 first-child 误用

作者: 纯爱枫若情 | 来源:发表于2019-03-20 14:03 被阅读0次

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

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

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

    感悟

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

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

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

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

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

    相关文章

      网友评论

          本文标题:伪类选择器 first-child 误用

          本文链接:https://www.haomeiwen.com/subject/aemzmqtx.html