CSSS样式穿透

在使用 CSS 样式时，有时候我们希望修改子组件中的样式，但是由于 CSS 的层叠规则，子组件的样式可能会被父组件的样式所覆盖。这时可以使用 CSS 样式穿透（CSS style piercing）来解决这个问题。

CSDN上面大多数都是使用

.parent >>> .child {
  /* 在父组件中使用 >>> 选择器穿透到子组件中 */
}

.parent /deep/ .child {
  /* 在父组件中使用 /deep/ 选择器穿透到子组件中 */
}

::v-deep .child {
  /* 在全局样式中使用 ::v-deep 选择器穿透到子组件中 */
}

:deep(.child){
  /* 在全局样式中使用 :deep() 选择器穿透到子组件中 */
}

这四种样式穿透怎么说呢，时好时坏，而且 >>> 和 /deep/ 它们在 CSS 规范中被废弃了，而另外俩种使用起来也不稳定，再次我推荐另一种，嘎嘎好用

.parent {

  @at-root .child{

  }
}

@at-root 指令不仅可以在sass文件里面使用还可以在vue组件里面使用，而v-deep只能在vue组件里面使用

so 那个好用就不用我说了吧