偽類選擇器 first-child 誤用

malakashi 發布于2019-08-30 15:56 / 2677人閱讀

摘要：偽類選擇器誤用背景最近遇到一個偽類選擇器的問題，一直困擾了我好久，因為我居然發現跟我想象中的用法不一樣，后來才發現居然確實是自己搞錯了，不禁大感慚愧。而偽類前面的標簽類型，只是起到個篩選的作用。

偽類選擇器 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，感覺看起來好像有點像是我想要的偽類選擇器一樣，于是我懷著激動的心情點進去了。

簡單的翻譯一下，該偽類元素代表著在一組兄弟元素中，這個類型的元素的第一個元素。

換上這個偽類以后，終于達到了理想的效果：

感悟

有些基礎的東西，剛開始學的時候，由于經驗不足，即使當時死記硬背記下來了，但是可以說仍舊是處于一知半解的狀態。而后面在實際運用的過程中，如果達到了自己想要的效果，也不會回頭查閱手冊。

可以說，這次犯的這個小錯誤，對我個人而言也起到了警醒的作用吧。對于一些我們總是認為自己已經掌握了的，認為好像很簡單的東西，我們總是不屑一顧去回頭溫習。因此一旦出了問題，我們往往很難發現究竟是什么原因導致了我們的挫敗。

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

如果，我們能做到時常回顧一下最基礎的知識，那么我相信對我們自身的成長會有極大的好處的。我相信在每一遍回顧的時候，都會得出不一樣的感悟。而每一次溫習，都會學習到新的東西。常學常新并不是一句妄語，我相信，境界不同的人，看同一個事物得到的會是不一樣的結果的。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117519.html

偽類選擇器 first-child 誤用

摘要：偽類選擇器誤用背景最近遇到一個偽類選擇器的問題，一直困擾了我好久，因為我居然發現跟我想象中的用法不一樣，后來才發現居然確實是自己搞錯了，不禁大感慚愧。而偽類前面的標簽類型，只是起到個篩選的作用。偽類選擇器 first-child 誤用背景最近遇到一個 css 偽類選擇器的問題，一直困擾了我好久，因為我居然發現跟我想象中的用法不一樣，后來才發現居然確實是自己搞錯了，不禁大感慚愧。...

Andrman 2019-08-26 13:38 評論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