接触前端的人都应该碰到过标签“nth-child() ”，这是一个神器的标签，可以轻松的选取我们想要的标签并加样式。今天余斗就详细说说这个nth-child的用法：
:nth-child(n)
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li",如：
.demo li:nth-child(n) {background: lime;}
等于
.demo li {background: lime;}
需要注意的是， 这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。
例：
.demo li:nth-child(3) {background: lime;}
选择列表中的第三个li元素，规定背景样式。
:nth-child(2n)
这中方式是前一种的变身，我们可以选择n的2倍数，实现选中奇数项，如：
.demo li:nth-child(2n) {background: lime;}
等于
.demo li:nth-child(even) {background: lime;}
这里的 “:nth-child(2n)”就等于":nth-child(even)"效果。
:nth-child(2n-1)
这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：
.demo li:nth-child(2n-1) {background: lime;}
等于
.demo li:nth-child(odd) {background: lime;}
实现这种奇数效果，我们还可以使用":nth-child(2n+1)"和":nth-child(odd)"。
:nth-child(n+5)
这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义，如：
.demo li:nth-child(n+5) {background: lime;}
我们可以使用这种方法选择我们需要开始选择的元素位置，也就是说换了数字，起始位置就变了。
:nth-child(-n+5)
这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：
.demo li:nth-child(-n+5) {background: lime;}
:nth-child(4n+1)
这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了，比如这个实例
.demo li:nth-child(4n+1) {background: lime;}
了解了nth-child() 选择器的用法，我们可以扩展下使用nth-last-child() 选择器，主要用于匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，以上关于nth-child() 选择器的用法同样适用于nth-last-child() 。
而类似于nth-child()和nth-last-child()，我们同样使用nth-of-type() 和nth-last-of-type()来选择父元素下的第N个或倒数第N个元素，这里不多讲。
nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class，是不是很方便，另外，在用的时候，要注意的是，IE8 及更早的版本不支持此标签。
资源均来自第三方，谨慎下载，前往第三方网站下载
