:nth-child()

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

:nth-child() 這個 CSS 偽類會基於元素在其父元素的子元素列表中的索引來匹配元素。換句話說，:nth-child() 選擇器會根據子元素在父元素的所有同級元素中的位置來選中它們。

試一試

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

<p>Track &amp; field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

備註： 在 element:nth-child() 語法中，子元素計數包括任何元素型別的同級子元素；但只有當*那個子元素位置上*的元素與選擇器的其他部分匹配時，才會被視為匹配。

語法

css

:nth-child([ <An+B> | even | odd ] [of <complex-selector-list>]?) {
  /* ... */
}

引數

:nth-child() 接受一個引數，該引數描述了匹配同級列表中元素索引的模式。元素索引從 1 開始。

關鍵字值

odd: 表示在一系列同級元素中，數字位置為奇數的元素：1、3、5 等。
even: 表示在一系列同級元素中，數字位置為偶數的元素：2、4、6 等。

函式式表示法

<An+B>

表示在一系列同級元素中，其數字位置與模式 An+B 匹配的元素，其中 n 為任意正整數或零，

A 是一個整數步長，
B 是一個整數偏移量，
n 是所有非負整數，從 0 開始。

它可以被理解為列表中的第 An+B 個元素。A 和 B 都必須是 <integer> 值。

`of <selector>` 語法

透過傳遞一個選擇器引數，我們可以選中匹配該選擇器的第 n 個元素。例如，以下選擇器匹配前三個設定了 class="important" 的列表項。

css

:nth-child(-n + 3 of li.important) {
}

這與將選擇器移到函式外部不同，例如：

css

li.important:nth-child(-n + 3) {
}

這個選擇器會選擇那些在前三個子元素中，並且匹配 li.important 選擇器的列表項。

示例

選擇器示例

tr:nth-child(odd) 或 tr:nth-child(2n+1): 表示 HTML 表格中的奇數行：1、3、5 等。
tr:nth-child(even) 或 tr:nth-child(2n): 表示 HTML 表格中的偶數行：2、4、6 等。
:nth-child(7): 表示第七個元素。
:nth-child(5n): 表示元素 5 [=5×1]、10 [=5×2]、15 [=5×3] 等。公式返回的第一個結果是 0 [=5x0]，這不會產生匹配，因為元素索引從 1 開始，而 n 從 0 開始。這乍一看可能很奇怪，但當公式的 B 部分 >0 時，就更有意義了，如下一個例子所示。
:nth-child(n+7): 表示第七個及之後的所有元素：7 [=0+7]、8 [=1+7]、9 [=2+7] 等。
:nth-child(3n+4): 表示元素 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。
:nth-child(-n+3): 表示前三個元素。[-0+3, -1+3, -2+3]
p:nth-child(n): 表示一組同級元素中的每個 <p> 元素。這與簡單的 p 選擇器選擇的元素相同（儘管具有更高的特異性）。
p:nth-child(1) 或 p:nth-child(0n+1): 表示一組同級元素中作為第一個元素的每個 <p>。這與 :first-child 選擇器相同（並且具有相同的特異性）。
p:nth-child(n+8):nth-child(-n+15): 表示一組同級元素中的第八到第十五個 <p> 元素。

詳細示例

HTML

html

<h3>
  <code>span:nth-child(2n+1)</code>, WITHOUT an <code>&lt;em&gt;</code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code>&lt;em&gt;</code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

* {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid tomato;
  display: inline-block;
  margin-bottom: 3px;
}

css

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: tomato;
}

結果

使用 'of <selector>'

在這個例子中，有一個無序的姓名列表，其中一些姓名已使用 class="noted" 標記為已注意。這些姓名已用粗下邊框突出顯示。

HTML

html

<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>

CSS

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

在下面的 CSS 中，我們定位的是標記有 class="noted" 的偶數列表項。

css

li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

結果

具有 class="noted" 的專案有粗下邊框，而專案 3、10 和 17 有實心背景，因為它們是具有 class="noted" 的偶數列表項。

of 選擇器語法 vs 選擇器 nth-child

在這個例子中，有兩個無序的姓名列表。第一個列表顯示了 li:nth-child(-n + 3 of .noted) 的效果，第二個列表顯示了 li.noted:nth-child(-n + 3) 的效果。

HTML

html

<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>

CSS

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

css

ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

結果

第一種情況將樣式應用於前三個帶有 class="noted" 的列表項，無論它們是否是列表中的前三項。

第二種情況將樣式應用於那些在列表前 3 項之內且帶有 class="noted" 的專案。

使用 of 選擇器修復條紋表格

表格的一個常見做法是使用斑馬條紋，即在行的淺色和深色背景之間交替，使表格更易於閱讀和訪問。如果某一行被隱藏，條紋會顯得合併，從而改變了預期的效果。在這個例子中，你可以看到兩個表格都有一個隱藏的行。第二個表格使用 of :not([hidden]) 來處理隱藏行。

HTML

html

<table class="broken">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>

CSS

body {
  display: flex;
  justify-content: space-around;
}
td {
  padding: 0.125rem 0.5rem;
}

css

.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}

css

.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}

結果

在第一個表格中，只使用了 :nth-child(even)，第三行應用了 hidden 屬性。因此，在這種情況下，第三行不可見，而第二行和第四行被計為偶數，技術上它們是偶數，但視覺上不是。

在第二個表格中，使用 of 語法，透過 :nth-child(even of :not([hidden])) 來僅定位未隱藏的 tr。

為表格列設定樣式

要為表格列設定樣式，你不能在 <col> 元素上設定樣式，因為表格單元格不是它的子元素（與行元素 <tr> 不同）。像 :nth-child() 這樣的偽類很方便選擇列單元格。

在這個例子中，我們為每一列設定了不同的樣式。

HTML

html

<table>
<caption>Student roster</caption>
<colgroup>
  <col/>
  <col/>
  <col/>
</colgroup>
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
  </tbody>
</table>

CSS

css

td {
  padding: 0.125rem 0.5rem;
  height: 3rem;
  border: 1px solid black;
}

tr :nth-child(1) {
  text-align: left;
  vertical-align: bottom;
  background-color: silver;
}

tbody tr :nth-child(2) {
  text-align: center;
  vertical-align: middle;
}

tbody tr :nth-child(3) {
  text-align: right;
  vertical-align: top;
  background-color: tomato;
}

結果

規範

規範
選擇器 Level 4 # nth-child-偽類

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 14 日，由 MDN 貢獻者們協作完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題

:nth-child()

關鍵字值

函式式表示法

of <selector> 語法

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

幫助改進 MDN

`of <selector>` 語法