在 Vue项目中，当一个组件使用了 scoped 特性时，组件内的样式只会应用于组件自身。但是有时候我们需要在 父组件中改变子组件中的样式，这时就需要用到深度选择器。

一、/deep/

<style scoped>
/* 子组件的样式 */
.child-component {
  color: red;
}

/* 父组件的样式，穿透子组件样式 */
/deep/ .child-component {
  color: blue;
}
</style>

二、>>>

.search-input >>>.el-input__inner{
	border: 0 !important;
	text-indent: 20px;
}

三、::v-deep（Vue3 ::deep）

<style scoped>
.parent {
  /* 父组件的样式 */
}

/* 无法修改子组件中过来的样式 */
.parent .child-component {
  background-color: red;
}

/* 可以使用 ::v-deep 解决样式穿透问题 */
.parent ::v-deep .child-component {
  background-color: red;
}
</style>

四、注意

在 Vue 3 中 ::v-deep 被废除了，取而代之的是 ::deep 伪选择器。推荐