：nth-child（n）

nth-child(n)是CSS选择器中的一种用法，用于选择某个元素的第n个子元素。其中，n可以是一个具体的数字、关键字（如even、odd）或者公式（如an+b）。

具体来说，nth-child(n)选择器会匹配父元素下的第n个子元素，无论其类型是什么。例如，nth-child(2)会选择父元素下的第二个子元素。

以下是一些常见的使用方式：
1. nth-child(n)：选择父元素下的第n个子元素。
2. nth-child(odd)：选择父元素下的奇数位置的子元素。
3. nth-child(even)：选择父元素下的偶数位置的子元素。
4. nth-child(an+b)：根据公式选择父元素下的子元素，其中a和b为整数。

需要注意的是，nth-child(n)是基于所有子元素的顺序进行选择，而不仅仅是某一特定类型的子元素。

相关问题

使用:nth-child(n)和:nth-last-child(n)选择器

:nth-child(n)和:nth-last-child(n)选择器都是CSS3中的伪类选择器，用于选择元素中的特定位置。

:nth-child(n)选择器选取父元素中第n个子元素。例如，:nth-child(2)会选取父元素中的第二个子元素。

:nth-last-child(n)选择器也是选取父元素中的第n个子元素，但是是从最后一个子元素开始计算的。例如，:nth-last-child(2)会选取父元素中的倒数第二个子元素。

这两个选择器也支持一些关键词：

- even：选取偶数位置的子元素
- odd：选取奇数位置的子元素
- n：选取任意位置的子元素

示例：

以下是一个HTML列表：

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>

使用:nth-child(n)选择器可以选取特定位置的项：

ul li:nth-child(2) {
color: red;
}

这个样式规则将把第二项的文本颜色设为红色。

使用:nth-last-child(n)选择器同样可以选取特定位置的项：

ul li:nth-last-child(2) {
background-color: yellow;
}

这个样式规则将把倒数第二项的背景颜色设为黄色。

使用关键词even和odd可以选取偶数或奇数位置的项：

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

这个样式规则将把列表中偶数项的背景颜色设为浅灰色。

ul li:nth-child(odd) {
background-color: lightblue;
}

这个样式规则将把列表中奇数项的背景颜色设为浅蓝色。

:nth-child(n)

:nth-child(n)是一个CSS伪类选择器，用于选择父元素的特定子元素。其中，n可以是整数值、表达式或关键词。整数值表示选择父元素中的第n个子元素，表达式可以是2n、-n等形式，关键词可以是odd（奇数）或even（偶数）。需要注意的是，参数n的起始值始终是1，而不是0。当参数n的值为0时，选择器将选择不到任何匹配的元素。[1][2][3]