【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()
閱讀時間約 5 分鐘
相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？
如果你並不是很確定什麼是 CSS 選擇器，建議可以先閱讀下文，再回來閱讀這篇文章：
什麼是 CSS 偽類（pseudo class）？
根據 MDN 文件，pseudo class （文件翻譯為虛擬類別，但多技術書籍內稱其為偽類）語法可以讓元素處在特定條件時套用指定的 CSS 效果。
舉例來說，當我們想要創造一個按鈕，當按鈕準備被使用者點擊，也就是觸發 JavaScript 的 mouseover 事件時，產生與原來樣式不一樣的效果，此時我們就可以使用 :hover 這個偽類，來讓我們的按鈕在滑鼠移動到按鈕時，套用不同的 CSS 樣式：
從上方的程式碼範例中，我們可以看到使用偽類的方式為 CSS 選擇器加上一個偽類語法，即可以做到在特定條件發生時，套用不同的樣式。
這裡需要注意的是，帶有偽類語法的 CSS 選擇器，其實跟一般的 CSS 語法沒有兩樣，一樣會帶有下方覆蓋上方的概念，所以我們只需要在偽類中寫入「需要改變的樣式」即可，其他的樣式依然會維持原有 CSS 選擇器中規範的樣式。
而當 mouseover 事件結束時，被額外加上去的樣式也會被移除，這就是偽類的運作模式。
由於偽類有非常多種，應用的情境也不同，接著就切入到我們今天的重點 :nth-child() 與 :nth-of-type() 吧！
:nth-child() 偽類選取第 n 個同層元素
我們先來簡單介紹一下 :nth-child() ，與上述的 :hover 偽類不同，這一個偽類後面多了一組小括號，這代表什麼意思呢？
根據 MDN ，:nth-child() 是一個可以針對特定條件匹配特定群組中的同層元素（sibling element），我們可以在小括號中帶入欲匹配的條件，舉例來說：
在上方範例中，我們想要序列為三的倍數的 li 元素帶有不同的顏色，此時我們就可以將 3n 這個參數帶入 :nth-child() 這個偽類中，並在偽類前帶上 li 選擇器，就可以獲得上方的效果。
這聽起來是不是很熟悉呢？是的，有些偽類的使用方式其實就跟 JavaScript 中的函式很像，只是在 CSS 中，有預先寫好一些條件，我們只要根據規範帶入指定條件即可，不需針對參數去做額外的設定。
關於 :nth-child() 中可以帶的參數：
- An+B：某個特定的倍數，例如：2n、3n、4n，或者是 2n+1、3n+2 這種特殊的條件都可以被 CSS 所接受，這邊的 n 會根據同層元素的多寡，從零開始做起算。
- 指定數字：某個指定的數字，例如：1、2、3 等指定的序列，但通常我們比較少用到（因為除非有特殊的狀況，不然一般網頁的樣式會因為要管理方便，會以規律性的樣式為主）。
- 偶數及基數：在大部分類似函式的偽類中，我們幾乎都可以帶入 odd（奇數） 或是 even（偶數），這兩個參數。
這裡需要注意的是， :nth-child() 中的參數只接受整數，選取的是同層元素，而不是指定元素中的子元素，這一點是自己在初學偽類時最常犯的錯，導致自己選半天選不到正確的元素。
補充：目前主流瀏覽器皆支援此語法。
:nth-of-type() 偽類選取同層同類別之元素
:nth-of-type() 這個語法跟 :nth-child() 使用的方法，及可以帶入的參數內容幾乎一模一樣，但這兩個語法不同的地方在於，:nth-of-type() 會額外根據同類型且同層的元素序列作匹配，而 :nth-child() 則單純根據同層元素的「總序列」來做匹配，這是什麼意思呢？
讓我們再來看一次 :nth-child() 的程式碼範例：
在上方的範例中，我們指定 p 段落的顏色為橘色，但是當 p 的序列為整體同層元素的三的倍數時，就會變成綠色。
但如果我們將語法改成用 :nth-of-type() 呢？此時我們要將參數改成 2n 才會生效，因為在此語法中，我們並不是以「整體序列」來做參考，而是以選擇器的序列（也就是 p 類別中的第二個），所以這也是為什麼我們要注意帶入參數的序列差異：
基本上這就是 :nth-child() 及 :nth-of-type() 偽類的使用方式了，是不是弄懂後發現它們其實沒這麼複雜呢？
上方的範例主要是讓大家可以更快、簡便的方式了解這兩個語法的差異，但在實務上可以透過這兩個語法快速且簡單的創造各式各樣的跳序列樣式，如果之後有遇到，再來跟大家分享更多更進階的範例及用法。
關於 pseudo class 你有什麼想要跟我分享的嗎？歡迎下方留言與我分享！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
421會員
98內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助