当前位置: 首页 > Web前端 > vue.js

你知道深层动作选择器---或-deep-或--v-deep吗?

时间:2023-03-31 14:48:47 vue.js

.a>>>.b{/*...*/}本帖分享的歌曲:继续前行-陈宏宇懂得很多,如果在vue项目中看到>>>或/deep/或::v-deep,不要大惊小怪,只是因为你就是不懂事,如果你去问主管,他只会在心里嘀咕你太不懂事了,哈哈哈哈。其实在vue的官网文档中也有介绍。不知道的话,只能怪自己偷懒了!!!官网链接:vue-loader.vuejs.org/zh/guide/sc...深度效果选择器:如果想让scoped样式的选择器表现得“更深”,比如影响子组件,可以使用>>>运算符:.a>>>.b{/*...*/}复制代码上面的代码会被编译成:.a[data-v-f3f3eg9].b{/*...*/}复制代码Sass等一些预处理器无法正确解析>>>。在这种情况下,您可以改用/deep/或::v-deep运算符-两者都是>>>的别名并且同样有效。总结一下使用场景:当我们需要在element-ui中重写样式时,只能使用deepactionselector样式来写css如下:.a>>>.b{***}style使用css预处理器(less,sass,scss)写法如下:第一种/deep//deep/.a{***}第二种::v-deep::v-deep.a{***}推荐使用第二种方式,/deep/会在某个时候报错,::v-deep更安全,编译速度更快。以上使用场景来自场景之家同类文章作者刘木生,谢谢。www.jb51.net/article/188……