CSS nth-child

CSS的伪类nth-child()用于选择一组元素中的某个元素，该元素是其父元素的第N个子元素。

例如，选择一个HTML无序列表中的第二个li元素：

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

在上面的代码示例中，使用nth-child(2)，选中了一个无序列表中的第二个LI元素，并将其背景色设置为黄色。

语法

element:nth-child(n)

• element：指定要选中某个子元素的父元素。
• n：一个整数，表示要选中的子元素的位置。

示例

第一个元素

要选择父元素的第一个子元素，使用伪类nth-child(1)：

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

偶数元素

要选择偶数位置的子元素，使用伪类nth-child(even)：

li:nth-child(even) {
  background-color: #f2f2f2;
}

奇数元素

要选择奇数位置的子元素，使用伪类nth-child(odd)：

li:nth-child(odd) {
  background-color: #f2f2f2;
}

每3个元素

要选择每隔3个子元素的元素，使用伪类nth-child(3n)：

li:nth-child(3n) {
  background-color: #f2f2f2;
}

总结

CSS的nth-child()伪类是一种很强大的选择器，可用于根据要选择的子元素的位置来选择父元素中的元素。 使用它可以使CSS更加动态和灵活，有助于轻松选择子元素的不同组合。