CSS :nth-child() 패턴

정의와 사용법

CSS :nth-child(n)}} 伪类用于匹配作为其父元素第 n 个子元素的任何元素。

이伪类根据元素在其父元素的子列表中的索引来匹配元素。

n 可以是数字/인덱스, 키워드（홀수 또는 짝수) 또는 공식（예： an + b)。

提示：查看 :nth-of-type() 의 자식 요소로 사용되는동일한 태그명으로의 n 个子元素的元素。

实例

例子 1

如何使用 :nth-child() 伪类：

/* 选择任何兄弟元素组中的每第四个元素 */
:nth-child(4) {
  background-color: yellow;
}
/* 选择 div 兄弟元素中的第二个元素 */
div:nth-child(2) {
  background-color: red;
}
/* 选择列表中的第二个 li 元素 */
li:nth-child(2) {
  background-color: lightgreen;
}

亲自试一试

例子 2

홀수 和 짝수 是关键字，可用于匹配索引为奇数或偶数的子元素（第一个子元素的索引为 1）。

在这里，我们为奇数索引和偶数索引的 <p> 元素指定不同的背景颜色：

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

亲自试一试

例子 3

使用公式（an + b) 描述：a 表示整数步长，n 是从 0 开始的所有非负整数，b 是整数偏移量。

在这里，我们为索引是 3 的倍数的所有 <p> 元素指定背景颜色（将选择第三个、第六个、第九个等元素）：

p:nth-child(3n+1) {
  background-color: red;
}

亲自试一试

例子 4

在这里，我们为索引是 3 的倍数的所有 <p> 元素指定背景颜色。然后我们减去 1（将选择第一个、第四个、第七个等元素）：

p:nth-child(3n-1) {
  background-color: red;
}

亲自试一试

CSS 语法

:nth-child(index | 홀수 | 짝수 | an+b) {
  css declarations;
}

技术细节

浏览器支持

표中的数字指定了完全支持该伪类的首个浏览器版本。