本文介绍了在不使用CSS预处理器时，如何使用>>>深度选择器。同时，详细阐述了当使用如SCSS的预处理器时，如何利用/deep/或::v-deep来穿透 scoped 属性的影响。当/deep/和::v-deep无效时，检查style标签是否带有scoped属性，或者将样式写入全局CSS中，并注意避免对其他样式造成干扰。
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
