前言：我们在用Vue进行模块化、组件化开发的时候，可以通过给样式加上scoped，避免了父组件的样式影响了子组件的样式。而/deep/ 的作用和scoped也有点类似。

css中的scoped

使用<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。

通过给style添加scoped，使它的css只作用于当前组件的元素。

1
2
3
4
5
6
<style scoped>
    .box{
        color:'#999';
    }
</style>

深度选择器 /deep/

使用了外界的组件（比如像Element-UI、Ant Design、Vant等组件库中的组件）或者自己开发一个组件，修改一处就可能会影响到用这个组件的所有样式，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。/deep/就能实现。

比如：

1
2
3
.box /deep/ .el-tabs__item {
  color: #303133 !important;  // !important 优先级
}

::v-deep

在vue2中，我们舍弃了’>>>’ 和 / deep /，改用**::v-deep**来进行深度选择

1
2
3
::v-deep .el-col {
	margin-top: 10px;
}

v-deep

而在vue3中，官方推荐使用**v-deep(.className)**来进行深度选择，当然::v-deep依旧也可以使用，不过可以采用缩写的方式来进行css编译—— :deep

1
2
3
4
5
6
7
8
9
::v-deep(.el-col) {
	margin-top: 10px;
}

// 缩写
:deep(.el-col) {
	margin-top: 10px;
}