一.伪类选择器
结构伪类常见书写方式:
第一类:找第几个孩子
1. :first-child 找第一个孩子2. :last-child 找最后一个孩子3. :nth-child(),正着找数字:写数字几就是找第几个孩子,2n或者even:找偶数2n+1或者odd:找奇数4. :nth-last-child(),倒着找数字:写数字几就是找倒数第几个孩子。
第二类: 从限定的类型中找第几个
1. :fist-of-type,从同类型中找出第一个孩子2. :last-of-type,从同类型中找出最后一个孩子3. :nth-of-type(数字),从同类型中找出第几个个孩子
微信小程序中使用
在wxml中写一个列表渲染
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
使用伪类选择器
view{height: 400rpx;display: flex;align-items: center;justify-content: center;
}
view:nth-child(odd){ //奇数background-color: lightblue;
}
view:nth-child(even){ //偶数background-color: lightcoral;
}
实现效果: