JS代码:

        data: {

                tests: [{}, {},{}]

        },

wxml代码:

<view>

                <view class='lists'>

                        <block wx:for="{{tests}}" wx:for-item="item" wx:for-index="index" wx:key="item">

                            <view class='lists-item'>

                                    <view class='lists-item1'>我是{{index}} Index的第一个</view>

                                    <view class='lists-item2'>我是{{index}} Index的第二个</view>

                            </view>

                        </block>

                </view>

</view>

wxss代码:

.lists{

    display: flex;

    flex-direction: column;

}

.lists :nth-child(odd){

    background-color: yellow

}

.lists-item{

    margin-bottom: 20rpx;

    background-color: red

}

问题BUG:

        使用了:nth-child  理论上讲应该是每一个lists-item的奇数背景是yellow色的

但是运行代码后 出现的确实这样的:

每一个lists-item 出现了:nth-child

但是每个lists-item中的子view居然也出现了 :nth-child

请问这个是什么问题?求解释