收藏
回答

CSS中的first-of-type不能正常使用怎么办?

代码如下:

<view class="tab-groups">
        <view class="selector"></view>
        <block wx:for="{{tabs}}">
            <view bind:tap="switchTab" class="tab" data-index="{{index}}">{{item}}</view>
        </block>
</view>


.tab-groups > .tab {
    display: inline-block;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    box-sizing: border-box;
    width: 200rpx;
    font-size: 30rpx;
    color: var(--sc-green);
    transition: color .2s ease;
    position: absolute;
    z-index: 1;
}
 
.tab-groups .tab:first-of-type {
    left: 0; /*不能正常显示*/
}
 
.tab-groups .tab:last-of-type {
    right: 0;
}

实际结果是.tab:first-of-type不能识别,只有last-of-type能识别,这是怎么回事?

最后一次编辑于  2019-10-31
回答关注问题邀请回答
收藏

2 个回答

  • 王志鹏
    王志鹏
    2019-10-31



    测试了一下  伪类还是生效的

    目前猜测是

    1. 循环遍历前元素还没创建 伪类就开始匹配元素  所以会发生样式加不上 或者加到别的元素上面

    2.first-of-type伪类不支持 view标签

    验证了一下  好像真的不支持


    2019-10-31
    赞同 1
    回复 3
    • DESTINY 〆
      DESTINY 〆
      2019-10-31
      感觉小程序限制很多
      2019-10-31
      回复
    • 王志鹏
      王志鹏
      2019-10-31回复DESTINY 〆
      遍历的时候判断 最后一个加别的class写个样式就OK了  灵活一点有很多办法解决
      2019-10-31
      回复
    • DESTINY 〆
      DESTINY 〆
      2019-10-31回复王志鹏
      好的,谢谢
      2019-10-31
      回复
  • 三世羽翾
    三世羽翾
    2019-10-31

    总用一些花里胡哨的css伪类,小心循环的自己都不知道啥是啥了

    2019-10-31
    赞同
    回复 3
    • 恐龙👾
      恐龙👾
      2019-11-12
      什么叫花里胡哨的伪类?既然有这个东西不就是方便人来用的么?
      2019-11-12
      回复
    • 三世羽翾
      三世羽翾
      2019-11-12回复恐龙👾
      解决方式千万条,你非要在这棵树上吊死,别人也咋不了你
      2019-11-12
      回复
    • 劲松
      劲松
      2019-12-26回复三世羽翾
      不解决问题,而去避开问题,如何学习如何成长?有这种思想,不建议当程序员
      2019-12-26
      回复
登录 后发表内容
问题标签