CSS :nth-child() 伪类
示例
如何使用 :nth-child() 伪类
/* 选择任何一组兄弟元素中的第四个元素 */
:nth-child(4) {
background-color: yellow;
}
/* 选择 div 兄弟元素中的第二个元素 */
div:nth-child(2) {
background-color: red;
}
/* 选择列表中的第二个 li 元素 */
li:nth-child(2) {
background-color: lightgreen;
}
亲自尝试 »
下面还有更多“亲自尝试”示例。
定义和用法
:nth-child(n) 伪类匹配其父元素的第 n 个子元素。
此伪类根据元素在其父元素子列表中的索引匹配元素。
n 可以是数字/索引、关键字（奇数或偶数）或公式（如 an + b）。
提示：查看 :nth-of-type() 伪类以选择其父元素的第 n 个子元素，且该子元素与其他子元素类型（标签名称）相同。
| 版本 | CSS3 |
|---|
浏览器支持
表格中的数字指定完全支持此伪类的第一个浏览器版本。
| 伪类 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 语法
更多示例
示例
odd 和 even 是可以用来匹配索引为奇数或偶数的子元素的关键字（第一个子元素的索引为 1）。
这里，我们为奇数和偶数的 p 元素指定了两种不同的背景颜色
p:nth-child(odd) {
background-color: red;
}
p:nth-child(even) {
background: lightgreen;
}
亲自尝试 »
示例
使用公式 (an + b)。描述：a 表示整数步长，n 是从 0 开始的所有非负整数，b 是整数偏移值。
这里，我们为所有索引是 3 的倍数的 p 元素指定了背景颜色（将选择第三个、第六个、第九个等）
p:nth-child(3n+1) {
background-color: red;
}
亲自尝试 »
示例
这里，我们为所有索引是 3 的倍数的 p 元素指定了背景颜色。然后我们减去 1（将选择第一个、第四个、第七个等）
p:nth-child(3n-1) {
background-color: red;
}
亲自尝试 »
