深度选择器 /deep/ ＞＞＞ ::v-deep的用法

css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。

这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。

如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 深度选择器了。

用法：

/deep/ .con{

}
>>> .con{
}
::v-deep .con{
}

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

vue3正确的写法

::v-deep(.con){
***
}

注意：/deep/  ::v-deep 只能在像 less , sass 等css预处理器中使用，在原生css中使用无效，所以原生css当中应使用 >>>