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>