一、什么是CSS3 Nth-child
CSS3 Nth-child是一个伪类选择器，它能够选择特定的HTML元素。通过Nth-child这个伪类选择器，我们可以轻松的为不同位置的元素来进行样式的设置。相比于其他选择器，它拥有更强的灵活性，能够达到我们比较理想的效果。
二、CSS3 Nth-child的语法
/*基本语法*/ element:nth-child(n) /*n可以是以下任意一个值*/ :nth-child(2) /*表示为第2个元素*/ :nth-child(2n) /*表示为偶数元素，0也算*/ :nth-child(2n+1) /*表示为奇数元素*/ :nth-child(3n+1) /*表示每3个元素中的第1个*/
其中element表示需要筛选的元素，n表示某个位置或某个位置的倍数或某个位置倍数加上一个常数。
三、CSS3 Nth-child的应用
1. CSS3 Nth-child对于表格的应用
如下代码，需要隔行变色：
table tr:nth-child(odd){/*odd代表奇数行*/
background-color: #f2f2f2;
}
这个样式的意思是，选择表格中的奇数行，并设置背景色。而选择偶数行，我们只需把odd改成even即可。
2. CSS3 Nth-child对于列表的应用
如下代码，需要对列表里面的第3个、第6个、第9个等位置的子元素背景色进行设置：
li:nth-child(3n){
background-color: #f2f2f2;
}
该代码可以将列表中每3个子元素为一组，且在这些子元素中选择位于第3个的元素，然后进行样式的设置。
3. CSS3 Nth-child对于图片列表的应用
代码如下，需要每2个li元素，就对它里面的img元素的宽和高进行缩小：
li:nth-child(2n) img{
width: 100px;
height: 100px;
}
我们可以通过上面这段代码选择每隔2个li元素，然后对该li元素里面的img元素进行样式的设置。
四、CSS3 Nth-child的使用技巧
1. 固定元素样式
通过上面的学习我们可以发现，CSS3 Nth-child可以选中某个位置的元素，使我们可以不必写多个类或者id，更易维护，更加高效，而且代码也更加简洁。
2. 选择多个位置的元素
CSS3 Nth-child不仅则十分方便的，还可以通过不同的参数，选择多个不同位置的元素，省去了选择器树的长链，简化了代码的编写。
3. 兼容性问题
CSS3 Nth-child虽然使用简单，但是要注意兼容性，老的浏览器完全适配不了我们的代码，会导致bug的出现。在写兼容性代码的时候，我们可以上百度或其他网站查看选取不同位置元素的方法。
五、总结
CSS3 Nth-child选择器可以非常方便的选择元素，不仅能选取特定位置元素，还可以以此为基础，选择多个位置的元素。说白了，Nth-child就是通过算法选取元素，这个时候也可以理解为，根据位置，元素的排列顺序来获取元素，从而方便的给不同位置的元素进行样式的设置。但是，在使用这个选择器的时候，还是要注意兼容性问题。
