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

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

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

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

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

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

或

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

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

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

或

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

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