css中使用伪类:not(first-child)过滤不能排除第一个元素的解决方法

需求效果：除了一个div元素下的第一个ul元素不使用这个样式

使用:not(first-child)之后不能过滤掉第一个ul元素的样式，代码如下：

<div class="listWrap">
      <div v-for="(item,index) in items" class="sidebarmain" :key="index" >
        <div :class="item.index === barIndex ? 'barActive side rela' : 'side rela'" @click="showToggle(item)">
          <i class="itemicon" :class="item.class"></i>
          <span>{{item.title}}</span>
          <i class="arrow el-icon-arrow-down" v-if="item.index === barIndex"></i>
          <i class="arrow el-icon-arrow-right" v-else></i>
        </div>
       <ul class="sideul" v-for="(sub, subindex) in item.subs" :key="subindex" v-show="item.index === barIndex">
         <li :class="sub.index === listindex ?'listActive rela':'rela'" @click="todetail(item, sub.index, sub.url)">
           <p>{{sub.title}}</p>
         </li>
       </ul>
    </div>
</div>

.sideul:not(:first-child) {
      border-top:1px solid rgba(255,255,255,0,0.2);
}

而效果是这样的：

解决方法

改变css样式：

ul.sideul:not(:first-of-type) {
   border-top: 1px solid rgba(255,255,255,0.2)
}

然后就得到了自己想要的效果

解释（tips）

:first-child匹配的是该父元素下结构里的第一个子元素，此例中即是class类为sidebarmain的div元素。

:first-of-type匹配的是该父元素下某个元素类型的第一个元素，此例中即为第一个ul元素。