前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css选择器选择奇数行或偶数行

css选择器选择奇数行或偶数行

作者头像
蓓蕾心晴
发布2022-12-06 13:52:49
2.1K0
发布2022-12-06 13:52:49
举报
文章被收录于专栏:前端小叙前端小叙

css选择器选择奇数行或偶数行

实现方式有两种

方式一:nth-child

代码语言:javascript
复制
/* 奇数行*/
div:nth-child(odd){

} 

/* 偶数行 */
div:nth-child(even){

} 

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素不论元素的类型

方式二:nth-of-type

代码语言:javascript
复制
/* 奇数行*/
div:nth-of-type(odd){

} 

/* 偶数行 */
div:nth-of-type(even){

} 

nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

区别:其实两者使用起来基本上是一样的,既然我们设置奇偶样式,大多数情况也都是给同类型标签进行设置的。

参考

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

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

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