什么是深度选择器？

scoped 属性是HTML5中的新属性，<style scoped>标签在加上了该属性时，样式实现组件私有化，当前父组件的样式不会渗透到子组件，不会造成样式污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器:deep()。

举个例子

不会影响子组件样式

<template>
  <div class="mb-4">
    <el-button>按钮</el-button>
  </div>
</template>
 
<style scoped>
.el-button>span {
  color: red;
}
</style>

会对子组件生效

<template>
  <div class="mb-4">
    <el-button>按钮</el-button>
  </div>
</template>
 
<style scoped>
:deep(.el-button>span) {
  color: red;
}
</style>