公告列表
公告列表
收藏
回答

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
      赞 1
      回复
    • 污昂ᰔᩚ王࿐
      污昂ᰔᩚ王࿐
      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
      赞 1
      回复
    • 三世羽翾
      三世羽翾
      2019-11-12回复恐龙👾
      解决方式千万条，你非要在这棵树上吊死，别人也咋不了你
      2019-11-12
      赞
      回复
    • 劲松
      劲松
      2019-12-26回复三世羽翾
      不解决问题，而去避开问题，如何学习如何成长？有这种思想，不建议当程序员
      2019-12-26
      赞 1
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
代码css