温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue中使用/deep/失效如何解决

发布时间:2022-11-23 09:52:35 来源:亿速云 阅读:902 作者:iii 栏目:开发技术

这篇文章主要讲解了“vue中使用/deep/失效如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中使用/deep/失效如何解决”吧!

1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器

<style scoped>
  .box >>> el.dialog {
  
  }
</style>

2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep

<style scoped lang="scss">
  .box /deep/ el.dialog {
  
  }
</style>

<style scoped lang="scss">
  .box ::v-deep el.dialog {
  
  }
</style>

3. 如果使用了css预处理器,使用/deep/ 和::v-deep 都失效,那么需要看看style 上是不是没有加上 scoped。若加上了还是无效,那么就只能把代码写入全局css中了,但是需要注意用一个css类包裹起来,不然会改变很多全局样式。

<style>
.box .el-dialog {

}
</style>

<style lang="scss">
.box .el-dialog {

}
</style>

感谢各位的阅读,以上就是“vue中使用/deep/失效如何解决”的内容了,经过本文的学习后,相信大家对vue中使用/deep/失效如何解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI