关于: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的用法常用的就是以上这些,如有错误或不严谨的地方,请务必给予指正!

你可能感兴趣的:(关于:nth-child的总结)