前情
Vue是目前主流的前端框架之一，我是Vue框架的忠实老用户，平时开发中如果再依赖个第三方组件库那样开发效率就会事半功倍。
第三方组件库可以很大提高开发效率，但是叫会有一些UI效果需要自定义，如想做一些微调更满足项目需求的时候，你会发现组件可能并没有提供可配置项，此时就不得不通过自定义css去调整组件样式了。
样式穿透
你直接通过dom查找修改样式是不会起效果的，此时我们就可以使用深度选择器来达到样式穿透，以达到微调组件样式。
调用方式(此处以调整京东nutui输入框清除按钮颜色为示例)：
<style lang="scss" scoped>
.form-item{
::v-deep {
.nut-textinput-clear{
color:rgba(93, 151, 171, 0.75);
}
}
}
</style>
除了上面的::v-deep，我们常见的还有/deep/、>>>，那我们到底该用哪种了，可以参考如下表格
| 类别 | css | less/node-sass | dart-sass | stylus |
|---|---|---|---|---|
| ::v-deep | √ | √ | √ | √ |
| /deep/ | √ | √ | × | √ |
| >>> | √ | × | × | √ |
从上表格知悉，我们可以w深度选择器::v-deep来兼容所有不同css的环境
标签：Vue,样式,deep,穿透,组件,css From： https://www.cnblogs.com/xwwin/p/16825539.html