在使用vue的时候,为了避免组件之间相互影响,可以在样式中加入一个css样式。
但是这样的直接坏处是父组件的样式不会渗透到子组件中去。
vue提供了深度作用选择器可以解决这个问题:
<template>
<div class="aa">
<a-breadcrumb>
<a-breadcrumb-item>首页</a-breadcrumb-item>
</a-breadcrumb>
<a-button>TEXT</a-button>
</div>
</template>
<style scoped>
.aa .ant-btn span{
color: red;
}
</style>
此时想让TEXT变成红色,你会发现并没有改变
如果使用了深度选择器 就会改变**。>>>**
<style scoped>
.aa .ant-btn >>> span{
color: red;
}
</style>
但是如果使用sass也是不可以解析的。需要使用**/deep/**才可以。
<style scoped lang='scss'>
.aa .ant-btn >>> span{
color: red;
}
</style>
这样是没有效果的 需要写成这样 才可以。
```css
<style scoped lang='scss'>
.aa {
.ant-btn {
&/deep/ span{
color: red;
}
}
}
</style>