CSS属性nth-child可以非常方便地选择一个元素在其父元素中的位置。直接理解为第n个儿子元素即可。

这个属性经常出现在使用CSS选择器时，对于手写网页或者一些基础的前端开发非常有用。

/*选择第一个儿子*/
p:nth-child(1) {
background-color: red;
}
/*选择第三个儿子以下的奇数儿子*/
p:nth-child(n+3):nth-child(odd) {
color: green;
}

上面的例子展示了两种不同的使用方法。第一个选择器用来选择第一个p元素，将其背景设置成红色。第二个选择器对于位置我们需要做一些解释，它先选择第三个儿子开始，再筛选出其中的奇数儿子（即${3,5...}$），将此处的p元素文字设置成绿色。

注意：nth-child属性可以添加对应选择器之外的参数，包括n,<=n,>=n等，可以方便地进行多重条件筛选。

/*选择第三个(包括第三个)之前的p元素*/
p:nth-child(-n+3) {
border: 1px solid black;
}
/*选择第1,3,5,7,9..个p元素进行样式处理*/
p:nth-child(2n-1) {
text-decoration: underline;
}

在实际开发过程中，会遇到很多复杂的布局与设计，如根据某个参数判断样式是否生效等，毕竟CSS也是编程语言，只是没有那么高逼格。

所以掌握nth-child选择器是必须的。展开CSS的世界吧。