CSS中的first-of-type不能正常使用怎么办？
发布于 5 年前 作者 yetao 14688 次浏览 来自 官方Issues

代码如下：

<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能识别，这是怎么回事？

2 回复

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

目前猜测是

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

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

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


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

回到顶部