前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS中:nth-child的用法

CSS中:nth-child的用法

作者头像
PHP学习网
发布2022-08-03 14:36:38
5190
发布2022-08-03 14:36:38
举报
文章被收录于专栏:PHP学习网PHP学习网

做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式

下面通过几个例子说明,相信你一看就明白

代码语言:javascript
复制
li:nth-child(2){background:#090}

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

代码语言:javascript
复制
li:nth-child(n+4){background:#090}

:nth-child(n+4)选取大于等于4标签,”n”表示从整数

代码语言:javascript
复制
li:nth-child(-n+4){background:#090}

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

代码语言:javascript
复制
li:nth-child(2n){background:#090}

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

代码语言:javascript
复制
li:nth-child(2n-1){background:#090}

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

代码语言:javascript
复制
li:nth-child(3n+1){background:#090}

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

代码语言:javascript
复制
li:last-child{background:#090}

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

代码语言:javascript
复制
li:nth-last-child(3){background:#090}

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 PHP学习网 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档