CSS3 伪类选择器 nth-child()说明

CSS3 的伪类选择器之一是nth-child()，其作用是筛选出一组兄弟元素中，特定位置的那一个。

语法说明

对某个元素所进行的选取规则为：

:nth-child([<an+b>])

解释如下：

• n表示从等差数列的第一个数开始，共有多少个数，从0开始计算。
• an+b表示等差数列的公式，其中a和b为自然数，且满足条件0 ≤ b < a。
• 用括号将an+b包含起来。

示例说明

1. 选择列表中的偶数项

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

上述代码中，nth-child(even) 表示选择所有列表中的偶数项，然后将它们的背景颜色设定为 #f2f2f2。

1. 选择列表中的奇数项

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

上述代码中，nth-child(odd) 表示选择所有列表中的奇数项，然后将它们的背景颜色设定为 #f2f2f2。

总结

nth-child()选择器支持各种算术表达式、关键词和伪类，让开发人员可以非常精确地选择需要控制的元素。开发人员可以根据具体需要，通过调整算术表达式或关键词参数，来实现各种各样的样式控制，从而更好地满足网页的需求。