说明

在Vue.js项目中，尤其是在使用组件化开发时，我们时常需要修改组件内部的样式，但Vue的样式封装特性（如 <style scoped> ）会 阻止外部样式 直接作用于组件内部。

深度选择器

为了允许 从 父组件 中穿透到 子组件 内部，直接修改子组件的样式，引入了 深度选择器

应用场景

需要定制第三方UI库组件样式时尤为有用，如：修改 element ui

注意

需要加 scoped，如下：

<style scoped>
</style>

例子

修改 el-checkbox-button 的样式，就需要用到 深度选择器，如下：

注意：需要加 scoped

<style scoped>
#font_biu /deep/ .el-checkbox-button__inner {
  width: 100%;
}
</style>

参考：
https://segmentfault.com/a/1190000045079523

原文出处：/show_1IX8TQ0htAyX.html