偽類選擇器 first-child 誤用

Andrman 發(fā)布于2019-08-26 13:38 / 1455人閱讀

摘要：偽類選擇器誤用背景最近遇到一個(gè)偽類選擇器的問題，一直困擾了我好久，因?yàn)槲揖尤话l(fā)現(xiàn)跟我想象中的用法不一樣，后來才發(fā)現(xiàn)居然確實(shí)是自己搞錯(cuò)了，不禁大感慚愧。而偽類前面的標(biāo)簽類型，只是起到個(gè)篩選的作用。

偽類選擇器 first-child 誤用

背景

最近遇到一個(gè) css 偽類選擇器的問題，一直困擾了我好久，因?yàn)槲揖尤话l(fā)現(xiàn)跟我想象中的用法不一樣，后來才發(fā)現(xiàn)居然確實(shí)是自己搞錯(cuò)了，不禁大感慚愧。

解決過程

我這里要介紹的就是 :first-child 這個(gè)偽類，我想象中的用法是這樣的：

html 代碼部分：


    第一個(gè) span
    第二個(gè) span
    第三個(gè) span

css 代碼部分：

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

最后頁(yè)面效果：

可以看到第一個(gè) span 的背景被設(shè)置為了紅色。

本來這樣用一直都是不錯(cuò)的，我一直以為這個(gè)選擇器選擇的是第一個(gè) element 元素，而我以前一直也都是這樣用的，也一直沒出過什么差錯(cuò)。

但是直到最近我遇見了下面這個(gè)情況，才真正搞得我抓狂了。

html 代碼部分：


    第一個(gè) div
    第一個(gè) span
    第二個(gè) span
    第三個(gè) span

這時(shí)候，我想故伎重演，用 #root > span:first-child?選中第一個(gè) span 元素，發(fā)現(xiàn)死活選中不了。

后來我靈機(jī)一動(dòng)，改成這樣：

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

發(fā)現(xiàn) div 被染上顏色了：

我隱隱約約感覺自己好像明白了點(diǎn)什么，于是我急忙點(diǎn)開快被我翻爛了的“前端圣經(jīng)”網(wǎng)站——mdn，找到 :first-child 詞條，開頭內(nèi)容這么說的：

很簡(jiǎn)單的內(nèi)容，大意就是說，我們這個(gè)偽類代表的是在一組兄弟元素中的第一個(gè)元素。而偽類前面的標(biāo)簽類型，只是起到個(gè)篩選的作用。

看到這里我們就明白了，這個(gè)選擇器，工作的邏輯是這樣的。拿到一組兄弟元素，然后從中拿到第一個(gè)元素，然后判斷一下，這個(gè)元素是不是跟冒號(hào)前面所指定的元素類型一樣的。如果是一樣，這個(gè)元素則被選中；否則則不被選中。

如果用 js 解釋描述一下這個(gè)邏輯，大概就是下面這樣：

let root = document.querySelector(".root");
let firstElementChild = root.firstElementChild;
if(firstElementChild.tagName.toLowerCase() === 目標(biāo)標(biāo)簽){
  // 執(zhí)行一些操作
}

所以，到這里我就徹底明白了，原來是我一直對(duì)于 :first-child 和 :nth-child() 這兩個(gè) css 偽類存在誤解。

那么到底怎么樣才能實(shí)現(xiàn)我想要的效果呢？

不得不說，mdn 的網(wǎng)站編排絕對(duì)是用了心的。正當(dāng)我準(zhǔn)備打開搜索引擎，搜索一番的時(shí)候，我看到了側(cè)邊的導(dǎo)航欄：

后面緊跟著的詞條是 :first-of-type，感覺看起來好像有點(diǎn)像是我想要的偽類選擇器一樣，于是我懷著激動(dòng)的心情點(diǎn)進(jìn)去了。

簡(jiǎn)單的翻譯一下，該偽類元素代表著在一組兄弟元素中，這個(gè)類型的元素的第一個(gè)元素。

換上這個(gè)偽類以后，終于達(dá)到了理想的效果：

感悟

有些基礎(chǔ)的東西，剛開始學(xué)的時(shí)候，由于經(jīng)驗(yàn)不足，即使當(dāng)時(shí)死記硬背記下來了，但是可以說仍舊是處于一知半解的狀態(tài)。而后面在實(shí)際運(yùn)用的過程中，如果達(dá)到了自己想要的效果，也不會(huì)回頭查閱手冊(cè)。

可以說，這次犯的這個(gè)小錯(cuò)誤，對(duì)我個(gè)人而言也起到了警醒的作用吧。對(duì)于一些我們總是認(rèn)為自己已經(jīng)掌握了的，認(rèn)為好像很簡(jiǎn)單的東西，我們總是不屑一顧去回頭溫習(xí)。因此一旦出了問題，我們往往很難發(fā)現(xiàn)究竟是什么原因?qū)е铝宋覀兊拇鞌　?/p>

這大概就是我們常說的，當(dāng)局者迷，旁觀者清吧。

如果，我們能做到時(shí)常回顧一下最基礎(chǔ)的知識(shí)，那么我相信對(duì)我們自身的成長(zhǎng)會(huì)有極大的好處的。我相信在每一遍回顧的時(shí)候，都會(huì)得出不一樣的感悟。而每一次溫習(xí)，都會(huì)學(xué)習(xí)到新的東西。常學(xué)常新并不是一句妄語(yǔ)，我相信，境界不同的人，看同一個(gè)事物得到的會(huì)是不一樣的結(jié)果的。

要不怎么會(huì)有佛家有三重境界一說呢。