css中使用伪类:not(first-child)过滤不能排除第一个元素的解决方法
2019-07-31 10:28
1811 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Sing_a_song_again/article/details/97891724
需求效果:除了一个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元素。
相关文章推荐
- 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- td:first-child 伪类 匹配第一个 匹配第一个 <td> 元素
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 解决intellij idea中使用live edit插件不能在chrome即时显示css变化的方法(html可以)
- Eclipse中maven环境使用jetty启动后不能保存更改后的css,js等静态文件的解决方法
- Firefox中动态创建元素后不能马上使用的解决方法 Ajax__
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- csshover.htc在IE7下使用:active伪类无效解决方法
- Eclipse中maven环境搭配,使用jetty启动后不能更改css,js文件的解决方法
- CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素
- JQuery:使用 toggle 切换 css 时,checkbox不能选中的解决方法;在checkbox中"放入"文字
- 解决内部容器float浮动后不能撑开外部容器及CSS伪类:after的使用
- 子元素浮动父容器高度不能自适应的CSS解决方法
- jq 获取第一个child的方法 以及ajax成化工和返回之后,怎么去使用触发该时间的元素
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法