CSS nth-child 怎麼用？選擇器完全指南與實例

為什麼要掌握 nth-child 選擇器？

想像一下，你需要對一個列表中的特定項目套用不同樣式：每三個元素變色、奇數行加背景、前五個元素特殊處理… 如果用傳統方法，你需要給每個元素加上不同的 class，既麻煩又不優雅。

CSS nth-child 選擇器讓你可以：

• 精準選擇任何位置的元素，無需額外 class
• 動態響應內容變化，自動適用樣式規則
• 減少 HTML 標記，讓代碼更乾淨
• 實現複雜模式，如表格斑馬紋、網格佈局等

本文將透過大量互動範例，讓你完全掌握這個強大的 CSS 選擇器！

基礎 nth-child 選擇器

讓我們從最基本的用法開始，透過視覺化的方式理解每種選擇器的運作原理。

基礎選擇器程式碼解析

上面的範例展示了最常用的 nth-child 選擇器。讓我們詳細了解每種語法：

數字選擇

/* 選擇第 2 個元素 */
.item:nth-child(2) {
  background: blue;
}

/* 選擇第 1 個元素的簡寫 */
.item:first-child {
  background: green;
}

/* 選擇最後一個元素的簡寫 */
.item:last-child {
  background: orange;
}

奇偶數選擇

/* 選擇奇數位置 (1, 3, 5, 7...) */
.item:nth-child(odd) {
  background: purple;
}

/* 選擇偶數位置 (2, 4, 6, 8...) */
.item:nth-child(even) {
  background: pink;
}

倍數選擇

/* 選擇 3 的倍數位置 (3, 6, 9, 12...) */
.item:nth-child(3n) {
  background: cyan;
}

重要概念：

• nth-child 從 1 開始計數，不是從 0
• 選擇器會選中所有符合條件的子元素
• odd 等同於 2n+1，even 等同於 2n

進階數學公式選擇器

nth-child 的真正威力在於它的數學公式功能。透過 an+b 的格式，你可以實現複雜的選擇模式。

數學公式深度解析

nth-child 的數學公式 an+b 是理解進階選擇器的關鍵。讓我們深入了解：

公式結構

:nth-child(an+b)

• a: 係數，決定間隔模式
• n: 變數，從 0 開始無限遞增 (0, 1, 2, 3…)
• b: 偏移量，調整起始位置

常用公式範例

/* 奇數元素 = 2n+1 */
:nth-child(2n+1)  /* n=0: 1, n=1: 3, n=2: 5... */

/* 偶數元素 = 2n */
:nth-child(2n)    /* n=1: 2, n=2: 4, n=3: 6... */

/* 每三個 = 3n */
:nth-child(3n)    /* n=1: 3, n=2: 6, n=3: 9... */

/* 前五個 = -n+5 */
:nth-child(-n+5)  /* n=0: 5, n=1: 4, n=2: 3, n=3: 2, n=4: 1 */

/* 從第3個開始的每2個 = 2n+3 */
:nth-child(2n+3)  /* n=0: 3, n=1: 5, n=2: 7... */

負數係數的妙用

/* 選擇前 N 個元素 */
:nth-child(-n+3) { /* 選擇前3個 */ }
:nth-child(-n+5) { /* 選擇前5個 */ }

/* 選擇中間範圍 */
:nth-child(n+3):nth-child(-n+7) { /* 選擇第3到7個 */ }

實際應用情境

/* 表格斑馬紋 */
tr:nth-child(even) { background: #f5f5f5; }

/* 網格佈局每行最後一個 */
.grid-item:nth-child(4n) { margin-right: 0; }

/* 文章列表突出顯示每5篇 */
.article:nth-child(5n) { border-left: 4px solid blue; }

實戰應用場景

掌握了基礎語法後，讓我們看看 nth-child 在真實專案中的強大應用。

實戰應用程式碼詳解

上面的範例展示了 nth-child 在真實專案中的具體應用。讓我們分析每個場景的實現：

表格斑馬紋效果

/* 偶數行背景色 */
.table tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* 也可以用奇數行 */
.table tr:nth-child(odd) {
  background-color: #ffffff;
}

網格佈局特殊處理

/* 每行最後一個元素去除右邊距 */
.grid-item:nth-child(3n) {
  margin-right: 0;
}

/* 第一行元素加上邊框 */
.grid-item:nth-child(-n+3) {
  border-top: 3px solid #blue;
}

導航菜單樣式

/* 第一個菜單項特殊樣式 */
.nav-item:first-child {
  background: #primary-color;
  color: white;
}

/* 偶數菜單項背景 */
.nav-item:nth-child(even) {
  background: #light-gray;
}

內容列表突出顯示

/* 每5個項目突出顯示 */
.article:nth-child(5n) {
  background: #highlight-color;
  border-left: 4px solid #accent-color;
}

/* 第一個項目特別處理 */
.article:first-child {
  font-weight: bold;
  background: #featured-color;
}

進度指示器

/* 已完成的步驟 (前N個) */
.step:nth-child(-n+3) {
  background: #success-color;
  color: white;
}

/* 當前步驟 */
.step:nth-child(4) {
  background: #current-color;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

實用技巧總結：

1. 表格：用 even/odd 提升可讀性
2. 網格：用 3n, 4n 等處理每行最後元素
3. 列表：用 5n, 10n 突出重要內容
4. 步驟：用 -n+N 顯示完成狀態
5. 導航：用 :first-child, :last-child 處理邊界

進階技巧與最佳實踐

掌握基礎後，讓我們探索一些 nth-child 的進階用法和實際開發中的最佳實踐。

複合選擇器運用

範圍選擇

/* 選擇第2到第5個元素 */
.item:nth-child(n+2):nth-child(-n+5) {
  background: yellow;
}

/* 排除某些元素後再選擇 */
.item:not(:nth-child(3)):nth-child(odd) {
  color: blue;
}

結合類型選擇器

/* 只選擇奇數位置的 <p> 元素 */
p:nth-child(odd) {
  margin-left: 20px;
}

/* 每3個 <img> 元素 */
img:nth-child(3n) {
  border-radius: 50%;
}

效能最佳化建議

避免過度使用

/* ❌ 效能較差 */
.item:nth-child(2n+1):nth-child(-n+10):not(.special) {
  /* 複雜的複合選擇器 */
}

/* ✅ 效能較好 */
.item:nth-child(odd) {
  /* 簡潔的選擇器 */
}

.item.first-ten:nth-child(odd) {
  /* 結合 class 降低複雜度 */
}

響應式設計中的應用

/* 桌面版：4列佈局 */
@media (min-width: 768px) {
  .card:nth-child(4n) {
    margin-right: 0;
  }
}

/* 平板：3列佈局 */
@media (max-width: 767px) {
  .card:nth-child(4n) {
    margin-right: initial; /* 重置桌面樣式 */
  }
  
  .card:nth-child(3n) {
    margin-right: 0;
  }
}

瀏覽器兼容性

nth-child 在現代瀏覽器中支援良好：

• 支援：Chrome, Firefox, Safari, Edge (所有現代版本)
• 不支援：IE8 及以下版本

兼容性處理

/* 漸進增強方式 */
.item {
  background: #default; /* 默認樣式 */
}

.item:nth-child(even) {
  background: #enhanced; /* 支援瀏覽器的增強樣式 */
}

實用選擇器公式收藏

/* 常用模式速查 */
:nth-child(odd)        /* 奇數: 1,3,5,7... */
:nth-child(even)       /* 偶數: 2,4,6,8... */
:nth-child(3n)         /* 每3個: 3,6,9,12... */
:nth-child(3n+1)       /* 每3個+1: 1,4,7,10... */
:nth-child(-n+5)       /* 前5個: 1,2,3,4,5 */
:nth-child(n+3)        /* 從第3個開始: 3,4,5,6... */
:nth-child(2n+3)       /* 從3開始每2個: 3,5,7,9... */
:nth-child(4n-1)       /* 每4個的前一個: 3,7,11,15... */

掌握這些技巧後，nth-child 將成為你 CSS 工具箱中最強大的選擇器之一！

總結

CSS nth-child 選擇器是現代網頁設計中不可或缺的工具。透過本文的完整介紹，你已經掌握了：

• 基礎語法：數字、odd/even、first/last-child 等基本用法
• 數學公式：an+b 公式的深度理解和靈活運用
• 實戰應用：表格、網格、導航、列表等真實場景
• 進階技巧：複合選擇器、效能優化、響應式應用

開始實踐的建議：

1. 從簡單開始：先熟練掌握 odd/even 和基本數字選擇
2. 理解公式：花時間理解 an+b 的計算原理
3. 實際應用：在自己的專案中嘗試不同的選擇模式
4. 測試驗證：使用開發者工具驗證選擇器效果

記住關鍵原則：

• nth-child 從 1 開始計數，不是從 0
• 公式中的 n 從 0 開始遞增
• 負數係數可以實現「前N個」的選擇
• 合理使用可以大幅減少 HTML 標記

CSS nth-child 選擇器的強大之處在於它的邏輯性和可預測性。一旦掌握了計算規則，你就能精確選中任何想要的元素，讓樣式設計更加靈活高效。

現在就開始在你的專案中運用這些技巧，創造出更優雅、更高效的 CSS 代碼！