css中/deep/的用法

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

<style scoped>
	...
</style>

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

添加后控制台显示的样式就会像这样：

.title[data-v-211e4c4a] {
    
    
    color: #ff0;
}

设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？

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

/deep/ 表示深度选择器

用法：

<style scoped>
     /deep/ .title{
    
    
        color: #ff0;
    }
</style>

除了 /deep/ 以外，>>> 和 ::v-deep也可以实现同样的效果

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