css奇数偶数选择器

前端项目开发中,需要根据行数的奇数和偶数的不同,设置不同的颜色显示,以在视觉上给用户以良好的浏览体验,这里就需要使用css奇数偶数选择器

主要用的::nth-of-type或者:nth-child。

方式一:nth-child

复制代码
div:nth-child(odd){
 
 
} //奇数行
 
 
div:nth-child(even){
 
 
} //偶数行

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

方式二:nth-of-type

复制代码
div:nth-of-type(odd){
  //奇数行  
} 
div:nth-of-type(even){
  //偶数行 
}

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

区别:nth-child () 与 nth-of-type()

nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。

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

n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。

相同之处是,两者都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。

稍微往下延伸,清楚了查找方式,那么不管前面的选择符怎么变,最后都是先查找到元素再与前面的选择符进行匹配。

也就是说选择符与他们的查找方式没有关系。

相关推荐
_AaronWong10 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode10 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419410 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo10 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭10 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木10 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮11 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati11 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉11 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
wuhen_n11 小时前
双端 Diff 算法详解
前端·javascript·vue.js