vue deep深度选择器

设置了scoped的话，如果想要在父组件中修改了组件的样式时应该怎么样做呢 ?如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 deep了。

deep 表示深度选择器

<!-- 写法1：使用::v-deep -->
<style lang="scss" scoped>
    ::v-deep .ant-card-head-titlef
    background: yellowgreen;
</style>
<!-- 写法2：使用>>>操作符 -->
<style scoped>
>>>.ant-card-head-titlef
background: yellowgreen;
</style>
<!-- 写法3：使用/deep/ -->
<style scoped>
/deep/.ant-card-head-titlef
background: yellowgreen;
</style>
<!-- 写法1：使用:deep(<inner-selector>) -->
<style lang="scss" scoped>
:deep( .ant-card-head-titlejf
background: yellowgreen;
</style>

写法1 和写法4，都支持sass预处理器。但是在新的vue3.0 单文件规范中，如果你还是使用写法1，会碰到如下警告:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use:deep(<inner-selector>) instead.

写法1在vue3.0中已经被弃用了，以后小伙伴们在开发vue3.0项目的时候，还是使用写法4吧~，有一说，写法4在语义上也更有助于理解。

关于写法1和写法3，主要是不支持sass预处理器的解析，且 >》操作符存在浏览器兼容性问题，所以朋友们还是谨慎使用吧~