关于:nth-child的总结

前端中感觉css确实是一个很神奇的东西，你说它容易吧，确实比较容易，写写元素的宽高，背景颜色，掌握一些基本的布局技巧就可以做出一个不算难看的网站。你要说它难，它也确实不简单，张鑫旭老师关于css还专门出了一本书《CSS世界》。自从css3发布之后，css的发展势不可挡，各种酷炫不可思议的效果都可以通过纯css来实现，并且各种动画效果也少不了css的踪影。当然css值得我们学习的东西有很多，但是一步一个脚印才是硬道理，今天来聊聊css中的:nth-child(低端IE浏览器请无视，捂脸.jpg)。

:nth-child一般大家都不陌生，它可以轻松选取你想要的标签并给它修改样式，但是它的用法多种多样，你全部都有了解吗？

:nth-child(2)选取第几个标签，“2可以是你想要的数字”

li:nth-child(2) {background: #090}

:nth-child(n+4)选取大于等于4标签，“n”表示整数，(下同)

li:nth-child(n+4) {background: #090}

:nth-child(-n+4)选取小于等于4的标签

li:nth-child(-n+4) {background: #090}

:nth-child(2n)选取偶数标签，2n也可以是even

li:nth-child(2n) {background: #090}

:nth-child(2n-1)选取奇数标签，2n-1也可以是odd

li:nth-child(2n-1) {background: #090}

:nth-child(3n+1)，自定义选取标签，3n+1表示隔二取一

li:nth-child(3n+1) {background: #090}

:last-child选取最后一个标签

li:last-child {background: #090}

nth-last-child(3)选取倒数第几个标签,3表示选取第3个

li:nth-last-child(3) {background: #090}

关于:nth-child的用法常用的就是以上这些，如有错误或不严谨的地方，请务必给予指正！

作者：橙色流年
链接：https://www.jianshu.com/p/6ec926c97e57