继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于:nth-child的总结

青春有我
关注TA
已关注
手记 1236
粉丝 205
获赞 1008

前端中感觉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}

webp


:nth-child(n+4)选取大于等于4标签,“n”表示整数,(下同)
li:nth-child(n+4) {background: #090}

webp


:nth-child(-n+4)选取小于等于4的标签
li:nth-child(-n+4) {background: #090}

webp


:nth-child(2n)选取偶数标签,2n也可以是even
li:nth-child(2n) {background: #090}

webp


:nth-child(2n-1)选取奇数标签,2n-1也可以是odd
li:nth-child(2n-1) {background: #090}

webp


:nth-child(3n+1),自定义选取标签,3n+1表示隔二取一
li:nth-child(3n+1) {background: #090}

webp


:last-child选取最后一个标签
li:last-child {background: #090}

webp


nth-last-child(3)选取倒数第几个标签,3表示选取第3个
li:nth-last-child(3) {background: #090}

webp


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



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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP