css深度ロールセレクターのロール：
スコープを使用した後でサードパーティのUIコンポーネントライブラリコンポーネントのスタイルを変更できない場合は、
ここでCSS深度セレクターを使用してスタイルを変更できます。
例：vueプロジェクトでは、elementUI、vant、iviewなどのコンポーネントライブラリがよく使用され、一部のスタイルファイルはカスタマイズできますが、スコープが現在に制限されているため、コンポーネントで直接変更すると無効になるスタイルもあります。コンポーネント、およびスコープを削除すると、グローバルスタイルに影響します。この場合、ディープアクションセレクター（つまり、スタイルペネトレーション）を使用できます。
1.プロジェクトでcssネイティブスタイルを使用している場合は、>>>ペネトレーション変更を直接使用できます
<style scoped>いくつかのVueプロジェクトを作成するとき、いくつかのUIコンポーネントがしばしば導入されます。カスタムコンポーネントであるか、導入された外部コンポーネントであるか。スタイルタグにはスコープ属性があります。スタイルが他のページに影響を与えないようにします。ただし、親コンポーネントの自己コンポーネントのスタイルを変更する必要があります。コンポーネントの浸透を使用する必要があります（cssのディープモディフィケーションとも呼ばれます）
1：>>>
>>>セレクターが「より深く」機能し、内部サブコンポーネントに影響を与えることを可能にします
プロジェクトがcssネイティブスタイルを使用している場合は、>>>を直接使用して変更を浸透させることができます。
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>
2：/ deep /
プロジェクトでは、プリプロセッサscss、sass、less演算子>>>が使用されている可能性があり、コンパイルできないためにエラーが報告される場合があります。/ deep /を使用して侵入できますが、vue-cli3によってミューテーションエラーが発生する可能性があります。今回は::v-deepを使用します
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
.button-box{
/deep/ .el-button{
padding: 13px 50px;
}
}
</style>3：::v-deep
:: v-deepは、プリプロセッサscss、sass、lessでより一般的です
:: v-deepは、プリプロセッサを使用する場合に使用できます。::v-deepと/deep/はどちらもディープセレクターであり、コンポーネント内のスタイルを変更できます。::v-deepはより高速に記録します。scssで/deep /を使用すると、ローダーエラーが報告されます。::v-を使用できます。代わりに深い
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b { color:red; }
}
/*用法2*/
.a ::v-deep .b { color:red;}
</style>材料：
Vueスタイルの貫通角度ブラケット3、/ deep /、::v-deepアプリケーションシナリオの考慮事項_June.1のブログ-CSDNblog_ / deep / ::v-deep