常用的总结提取出来啦、
/* :nth-child(1) box组件中的第一个view 背景色设置 按照顺序设置,弊端,同一组件中可能包含不同组件,这个只能按照顺序设置*/
/*:nth-of-type(1) box组件中的第一个view 背景色设置 与child区别, type同一类型的组件有效,不会被中间的其他组件干扰*/
/*:first-child 第一的背景色 */
/*:last-child 最后一个的背景色 */
/*:last-of-type 最后一个的背景色 同样的,区别在于同一类型组件有效,不受别的组件干扰*/
/* :nth-of-type(2n-1)奇数偶数-选择器 */
/* :nth-of-type(2n)奇数偶数-选择器 */
/*:nth-of-type(odd) 简写 奇数 */
/*:nth-of-type(even) 简写 偶数*/
详情使用案例、
<style>
/* box组件中的第一个view 背景色设置 按照顺序设置,弊端,同一组件中可能包含不同组件,这个只能按照顺序设置*/
.box>view:nth-child(1){
background: #007AFF;
}
/* box组件中的第一个view 背景色设置 与child区别, type同一类型的组件有效,不会被中间的其他组件干扰*/
.box>view:nth-of-type(1){
background: #007AFF;
}
.box>view:nth-of-type(2){
background: #007AFF;
}
/* 第一的背景色 */
.box>view:first-child{
background: #007AFF;
}
/* 最后一个的背景色 */
.box>view:last-child{
background: #007AFF;
}
/* 最后一个的背景色 同样的,区别在于同一类型组件有效,不受别的组件干扰*/
.box>view:last-of-type{
background: #007AFF;
}
/* 奇数偶数-选择器 */
.box>view:nth-of-type(2n-1){
background: #007AFF;
}
/* 简写 奇数 :nth-of-type(odd) */
.box>view:nth-of-type(odd){
background: #007AFF;
}
/* 偶数 :nth-of-type(2n) */
.box>view:nth-of-type(2n){
background: #007AFF;
}
/* 简写 偶数 nth-of-type(even) */
.box>view:nth-of-type(even){
background: #007AFF;
}
</style>