收藏
回答

CSS nth-child问题

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 工具 6.6.3 2.5.0

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


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

最后一次编辑于  01-18  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 微盟
    微盟
    01-18

    .lists  .lists-item:nth-child(odd)

    01-18
    赞同 1
    回复 2
    • JW
      JW
      01-18

      确实是想要的效果  但能说下是什么意思么?没太明白,多谢

      01-18
      回复
    • 永恒君
      永恒君
      01-18

      nth-child 包含了孙子级

      01-18
      回复
  • JW
    JW
    01-18

    @官方  这是代码片段 https://developers.weixin.qq.com/s/yO3mfwmu7l54

    01-18
    赞同
    回复