vue 深度作用选择器
深度作用选择器
在vue中,为了避免父组件的样式影响到子组件,我们会在style中加scoped
属性,声明CSS只作用于当前组件中的元素(没有使用scoped的则会被当成全局CSS使用)。
但是有时候我们在使用scoped后,希望某些选择器能作用在更深的地方,比如它的子组件。我们就可以使用>>>
操作符。
// 父组件
<style scoped>
.el-header {
height: 60px;
}
// 如果需要作用到子组件 则在选择器前加上>>>操作符即可
>>> .el-header {
height: 60px;
}
</style>
sass、less
使用sass之类的预处理器可能无法正常解析>>>
操作符,所以可以使用/deep/
代替。
/deep/ .el-header {
height: 60px;
}