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;
}

posted @ 2021-10-27 14:46  可爱的黑精灵  阅读(171)  评论(0)    收藏  举报