微信小程序-伪类选择器

一.伪类选择器

结构伪类常见书写方式：

第一类：找第几个孩子

    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;
}

实现效果：