CSS 样式穿透的三种方式

1、 >>>

外层容器 >>> 组件 { } // stylus && less

2、/deep/

外层容器 /deep/ 组件 { } // less

3、::v-deep

外层容器 ::v-deep 组件 { } // scss && less

// 示例 1
.wrapper ::v-deep .van-pull-refresh__head {
  color: #fff;
}

// 示例 2
.wrapper {
  background-color: #387bff;
  ::v-deep .van-pull-refresh__head {
    color: #fff;
  }
}

4、深度选择器（Vue3）

在带有 scoped 的时候，父组件的样式将不会泄露到子组件当中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这是有意为之的，这样父组件就可以设置子组件根节点的样式，以达到调整布局的目的。

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：
个伪类：

<style scoped>
/* 方式一： */
.a :deep(.b) {
  /* ... */
}

/* 方式二： */
.a {
  :deep(.b) {
    /* ... */
  }
}
</style>

上面的代码会被编译成：

.a[data-v-f3f3eg9] .b {
  /* ... */
}