: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>` 语法