Vue中样式scoped和样式穿透的实现原理

在vue组件中可以使用scoped的css来实现样式的模块化，避免对其他组件的影响；而想在父组件中修改子组件的样式时往往由于scoped的原因，导致样式不生效，需要使用深度选择器进行样式穿透。

1.父组件Home

2.子组件Card.vue

深度选择器直接卸载父组件的style中

.card >>> .title {
  color: red;
}
.container .card >>> .list .item {
  color: green;
}