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) {
  /* ... */
}
</style>

上面的代碼會被編譯成：

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