深度样式选择器

在开发项目时，对于处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件

vue3

使用:deep

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

问题：:deep不生效

原因：使用scoped的时候，在 html 的标签中会生成data-v-xxx的一个属性，样式穿透就是利用的这个属性生成的css

解决：在需要修改样式的子组件外面加父组件并定义样式

vue2

1、>>>

<style scoped>
.a >>> .b { 
 /* ... */ 
}
</style>

2、 /deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>