:nth-child()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
试试看
**注意:** 在 element:nth-child()
语法中,子元素计数包括任何元素类型的兄弟子元素;但只有当在该子元素位置的元素与选择器的其他部分匹配时,才被视为匹配。
语法
:nth-child()
接受一个参数,该参数描述了在兄弟元素列表中匹配元素索引的模式。元素索引从 1 开始。
:nth-child(<nth> [of <complex-selector-list>]?) {
/* ... */
}
关键字值
函数式表示法
of <selector>
语法
通过传递选择器参数,我们可以选择与该选择器匹配的第 n 个元素。例如,以下选择器匹配前三个具有 class="important"
设置的列表项。
:nth-child(-n + 3 of li.important) {
}
这不同于将选择器移出函数外部,例如
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
<h3>
<code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></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><em></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><span></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><em></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><em></code>, not a <code><span></code>, and
<code>nth-of-type</code> only selects children of that type. The
<code><em></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
.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
<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
在下面的 CSS 中,我们针对标记为class="noted"
的偶数列表项。
li:nth-child(even of .noted) {
background-color: tomato;
border-bottom-color: seagreen;
}
结果
带有class="noted"
的项目有粗下划线,项目 3、10 和 17 有实心背景,因为它们是带有class="noted"
的偶数列表项。
of 选择器语法与选择器 nth-child
在本例中,有两个无序名称列表。 第一个列表显示了li:nth-child(-n + 3 of .noted)
的效果,第二个列表显示了li.noted:nth-child(-n + 3)
的效果。
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
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"
的前三个列表项,无论它们是否是在列表中的前三个项目。
第二种情况将样式应用于带有class="noted"
的项目,如果它们位于列表中的前 3 个项目中。
使用 of 选择器修复条纹表格
表格的常见做法是使用斑马条纹,它在行的浅色和深色背景颜色之间交替,使表格更易于阅读,更易于访问。 如果隐藏一行,条纹将显示为合并并改变所需效果。 在本例中,您可以看到两个带hidden
行的表格。 第二个表格使用of :not([hidden])
处理隐藏行。
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
.broken > tbody > tr:nth-child(even) {
background-color: silver;
}
.fixed > tbody > tr:nth-child(even of :not([hidden])) {
background-color: silver;
}
结果
在第一个表格中,这只是使用:nth-child(even)
,第三行应用了hidden
属性。 因此,在本例中,第三行不可见,第二行和第四行被计为偶数,从技术上讲,它们是偶数,但从视觉上讲,它们不是。
在第二个表格中,of 语法用于仅定位不隐藏的tr
,使用:nth-child(even of :not([hidden]))
。
设置表格列样式
要设置表格列样式,您不能在<col>
元素上设置样式,因为表格单元格不是它的子元素(如您对行元素<tr>
所做的那样)。 像:nth-child()
这样的伪类非常适合选择列单元格。
在本例中,我们为每一列设置不同的样式。
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
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;
}
结果
规范
规范 |
---|
选择器级别 4 # nth-child-伪类 |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参见
:nth-of-type()
:nth-last-child()
:has()
: 用于选择父元素的伪类- 树结构伪类
- CSS 选择器 模块