css样式 中 /deep/ 的含义 以及用法

首先 /deep/ 深度选择的意思

一、先来聊聊scope

这个大家应该都不陌生，使用场景为在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。

父组件

<template>
    <div>
        <h1 class="title">{{ name }}</h1>
        <input type="text" v-model="name">
        <child />
    </div>
</template>

<script>
import child from './child';
export default {
    data () {
        return {
            name:''
        }
    },
    components: {
        child
    }
}
</script>
<style scoped>
     .title{
        background-color:"#f0f0f0",
        color: '#333';
    }
</style>

子组件

<template>
    <div>
        <h1 class="title">child</h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
    .title{
        color:'#999';
    }
</style>

主要就是我们加了scoped之后，样式会自动添加一个hash值

.title[data-v-221e4c4a] {
    color: ‘#333’;
}

二、/deep/

使用了外届的组件或者自己开发一个组件，修改一处就可能会影响到用这个组件的所有样式，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。/deep/就能实现
比如给组件加：

<style scoped>
     /deep/ .title{
        color: ‘#999’;
    }
</style>

这样就不会影响项目里使用这个公共组件的其他地方的样式