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

CSS/设计
321
0
0
2023-01-07

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

实现方式有两种

方式一: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个同级兄弟元素。

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