使用 :nth-child() 这个伪类 .. 我们可以根据子元素基于它的父元素的位置来选择元素 … 这个伪类支持参数 … 参数可能是一个整数 … 比如 1，会选择父元素里的第一个子元素 ..

我们也可以使用关键词作为它的参数 … 比如 odd … 这样可以选择奇数位置上的子元素 … 也就是在第 1，3，5，7 这样位置上的元素 … 我们也可以使用 even … 它可以选择偶数位置上的子元素 .. .

另外这个参数还可以是表达式 .. 表达式的形式是 an+b .. a 和 b 都是整数 … b 表示开始的位置 … 前面的 an 表示隔几个选择 … 2n 就表示隔两个选择 …

这样 2n+1 跟关键词 odd 是一样的功能 … 它会先选择第一个元素 … 然后隔两个，选择第 3 个元素 .. 然后再隔两个选择第 5 个元素 ..

如果表达式是 2n+0 ，它相当于是 2n … 从第零个开始，隔两个一选择，也就是第一个选择的元素是第二个子元素 … 然后是第四个 … 它的功能跟关键词 even 是一样的 ..

测试

下面我们去测试一下 … 比如我们要选中页面上这个封面列表里的第一个列表项目里的图像元素 … 然后把它变成圆形的 ..

li:nth-child(1) img {
border-radius: 50%;
}

选择第二个列表里的图像，可以把开始的位置号改成 2 … 选中奇数项目 … 使用关键词 odd … 或者使用表达式 2n+1

选中偶数项目，可以使用 even … 使用表达式的话，可以使用 2n+0 … 或者省掉后面的 0 .. 直接使用 2n …

如果想从第四个开始选择，然后每隔4个元素选择一个 … 可以使用表达试 4n+4 …