CSS scoped下的深度作用选择器

在vue中
css作用域中如果添加 scoped 属性
那这些样式就 只能作用于当前组件
不能直接操作子组件的样式

比如

<template>
  <div id="app">
    <el-input v-model="text" class="text-box"></el-input>
  </div>
</template>

<style scoped>
	#app input {
		background:#fff;
	}
</style>

这时 el-input 组件中的input是获取不到这个样式的

处理方法:
使用 深度作用选择器
通过穿透组件作用子组件的样式

<template>
<style scoped>
	#app >>> input {
		background:#fff;
	}
</style>

这个是普通css 作用域的语法
如果是sass或less这种预编译语法
则 不支持 >>> 这种形式
有另外一种形式支持: /deep/

<style lang="less" scoped>
#app {
  /deep/ input {
    background:#fff;
  }
}
</style>