[JavaScript知识库]关于深度选择器/deep/（::v-deep）和＞＞＞

深度选择器为什么出现？

? ? ? ? 在使用vue开发时组件私有化样式时使用scoped实现，此时我们使用普通的方式修改第三方库某些样式，如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识，如：v-data-254811...等。

使用>>>

<style scoped>
    #app >>> a {
        color: red
    }
</style>

? ? ?但是如果你使用了css预处理器，如less、sass、stylus，这些预处理器无法正确解析>>>，此时就需要用下面的方法进行替代

/deep/和::v-deep

<style scoped lang="scss">
#app {
    /deep/ a {
        color: rgb(16, 140, 172)
    }
    ::v-deep a {
        color: rgb(118, 211, 110)
    }
}
</style>